Color Compare.

Choose readable text and background colors

1. Enter colors with a leading # and six digits, such as #1A1A1A. Use Add color to compare more candidates.
2. Select which palette color represents text and which represents its background. The contrast result updates as you edit either value.
3. Use ARGB mode for eight-digit #AARRGGBB values. The first two digits control opacity: 00 is transparent, 80 is about half opaque, and FF is opaque. This differs from CSS's eight-digit #RRGGBBAA notation.
4. Check the result for the actual text size, then test the design in context. Switching back to HEX removes the alpha component.

A worked example: gray body text

Set text to #777777 and the background to #FFFFFF. The ratio is about 4.48:1: it passes AA for large text but fails AA for normal text. Darken the text to #767676 and the ratio becomes about 4.54:1, passing AA for normal text. A small visual difference can cross a threshold; the pass/fail labels use the full calculation, not the rounded number.

What the results mean

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. Large text means at least 18 pt (24 CSS px), or 14 pt (about 18.67 CSS px) when bold. The sample above demonstrates colors, not whether your own font qualifies as large.

The calculator converts sRGB channels to relative luminance and divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. Ratios range from 1:1 to 21:1. See the WCAG contrast guidance for exceptions and the full definition.

Transparency, limitations, and privacy

For transparency, layer order matters. Half-transparent black text on white looks gray; checking black alone would overstate its contrast. This tool composites onto a white page before calculating. Gradients, photographs, filters, and other underlying surfaces require testing the actual rendered colors at the weakest-contrast location.

An invalid or empty selected color clears the contrast result rather than leaving an old pass visible. The standalone swatches show valid colors over white; the text sample shows the selected pair layered together. Color checks run locally, and reloading resets the palette. This tool does not currently save or share palettes.

A passing ratio is not a complete accessibility audit. Check keyboard use, labels, focus, zoom, and whether information relies on color alone. Test relevant interactive states; inactive controls have different WCAG exceptions.