Color Contrast Checker

Colour contrast is the difference in brightness between text and the colour behind it. Too little makes text hard to read, for people with low vision and for anyone on a dim or glaring screen. WCAG, the Web Content Accessibility Guidelines, measures it as a ratio from 1:1 to 21:1, black on white.

The WCAG formula

WCAG 2.x defines the contrast ratio of two colours as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker. Relative luminance is 0.2126 R + 0.7152 G + 0.0722 B, after each sRGB channel c, as a fraction from 0 to 1, is linearised: c / 12.92 if c is at most 0.04045, otherwise ((c + 0.055) / 1.055) ^ 2.4. The tool uses 0.04045, the value in the current WCAG 2.x text; older copies say 0.03928, which gives the same result for every 8-bit colour.

A worked example, #767676 on #ffffff: each channel of #767676 is 118, or 0.4627 as a fraction, which linearises to 0.1812, its luminance. White's is 1. The ratio is (1 + 0.05) / (0.1812 + 0.05) = 4.54:1, just above 4.5:1. One step lighter, #777777 on white gives 4.47:1 and fails.

The thresholds

Normal text needs at least 4.5:1 for level AA and 7:1 for level AAA. Large text needs 3:1 for AA and 4.5:1 for AAA; it means at least 24 CSS px (18pt) regular, or 18.66 CSS px (14pt) bold. User interface components and graphical objects, such as an input's border or an icon that carries meaning, need 3:1 against the colours next to them (success criterion 1.4.11, level AA).

WCAG says nothing about rounding, so the tool never rounds up: it truncates to two decimals, and 4.4999:1 shows as 4.49:1 and fails 4.5:1.

Transparency

A colour with transparency is blended over what is behind it with straight alpha compositing in sRGB: each channel is top × alpha + behind × (1 − alpha), rounded to a whole value. The foreground is blended over the background, and a transparent background over the page behind it, white unless you change it. The tool shows the opaque colour it used.

What the tool does not check

It checks one pair of flat colours, not text over images or gradients, hover and focus states, disabled controls or logos; WCAG exempts some of these, and the rest need manual review. A passing ratio is necessary for many criteria but not sufficient: it does not make a page accessible.

Privacy

The colours you enter are processed in your browser and never leave it. Like every page on this site, the page records a visit when it loads, but not the colours you type.

How to use

1. Type or pick a foreground (text) colour and a background colour.
2. Read the ratio and the five checks; they update as you type.
3. If a check fails, use a suggested colour, then copy the result.

Features

• Hex, rgb(), hsl() and every CSS colour name, with or without transparency.
• The nearest passing colour by lightness, checked again before it is shown.

Common uses

• Checking a design before build. Test a palette's text and background pairs before they reach code.
• Verifying brand colours. See which work for body text, which only for large text or icons.
• Writing accessibility test cases. Turn the thresholds into expected results.
• Fixing a flagged pair. When a scan reports low contrast, find the nearest passing colour. RoboQA's tests can include accessibility checks for WCAG 2.1 issues such as contrast, roles and alt text.

Frequently asked questions