Color Contrast Checker

About this color contrast checker

Calculate the WCAG relative luminance contrast ratio between two opaque sRGB colors. The output compares the unrounded ratio with common AA and AAA thresholds for normal and large text.

Channels are linearized from sRGB before weighted luminance is calculated. The lighter luminance plus 0.05 is divided by the darker luminance plus 0.05. Normal text AA requires 4.5:1; normal text AAA requires 7:1.

Large text means at least 18 point regular or 14 point bold under WCAG definitions. This two-color calculation does not assess transparency, gradients, photographs, focus indicators or the whole accessibility of a page. Rounding the displayed ratio does not change pass decisions.

Using Color Contrast Checker starts with the Text color and Background color controls. Black text on white has a ratio of 21:1 and passes all listed text thresholds. Identical foreground and background colors have a ratio of 1:1. Select Calculate to update the result below the controls. Read the output together with the color contrast checker limitations described here before using it in a document, project or decision. Change one input at a time when comparing alternatives so that you can identify which change affected the result.

Which controls should I check first?

The Color Contrast Checker form labels its controls as Text color; Background color; Result. Use those labels to keep the source and settings separate. A sample argument that selects a mode is not additional source text. Choose the setting matching your intended operation before copying a result, and change it explicitly when comparing another mode. The labels describe what this form accepts; the worked examples below demonstrate only the stated supplied values.

How should I interpret this specific operation?

Contrast uses linearized sRGB luminance rather than averaging channel values. Black and white give 21:1, while two identical colors give 1:1. For normal text the stated AA and AAA thresholds are 4.5:1 and 7:1. This calculation is one aspect of readable design; size, weight and actual rendered backgrounds still need inspection. A translucent source should be resolved against its background before a plain-color comparison.

Worked helper values

These values come from the reproducible calculation examples supplied with this tool. Each row identifies the complete supplied arguments and the returned value. A visible ↵ denotes a line break and ⇥ denotes a tab in text examples. Settings appear alongside source data so that a different mode is not mistaken for an identical input. These are helper calculations, not observations of a live device, fetched target, image decoder, browser preview or downloaded file. Use the stated method above to relate the returned fields to the actual operation.

What is a channel calculation and what is a visual judgment?

A palette, gradient or contrast calculation follows the explicit channel rule above. That creates a reproducible result, but the purpose of the color choice still needs visual inspection. A contrast ratio is a measured relationship between the supplied opaque colors; a gradient declaration describes a transition; a palette is a sequence of colors. Keep the type of result attached to its value. A smooth-looking transition does not establish readable text, and a high contrast pair does not establish that every part of a multi-color layout uses that pair.

How should I inspect the destination background?

Check the colors in the element where they will be used, with its real dimensions, text and surrounding background. A translucent overlay can change the visible colors, so a comparison of two unblended color values can miss the actual result. A gradient also exposes several backgrounds under a text label rather than just one endpoint. Inspect the least favorable area where text appears. The numerical example is useful for understanding the calculation, while the destination preview checks how the chosen values are combined in that particular layout.

Why do exact color values matter?

Keep six-digit HEX values or the full declaration alongside a saved design choice. A screenshot can change through display settings and image compression, and sampling it may yield values that differ from the original token. For a palette, preserve order as well as each value. For a gradient, preserve angle and stops. For contrast, preserve which foreground and background were compared. A short label such as blue or light gray is not sufficient to reproduce the same calculation. Source values make later comparisons traceable when a theme changes.

What does interpolation leave out?

Interpolating channel values describes a numerical path between colors. It does not guarantee equal perceived steps, meaningful categories or appropriate emphasis in a chart. Check neighboring colors under the conditions where users need to distinguish them. A palette containing black, a base and white can be useful for a simple exploration, but the midpoint rule alone does not create a complete design system. Choose semantic roles and inspect actual text and shapes separately. Keep the mathematical sequence as one ingredient of the design rather than interpreting it as an automatically approved visual hierarchy.