TypeMay Your words stay here
TypeMay / Practical tools

Make the words stand out.

Calculate WCAG 2.2 text contrast for two opaque sRGB hex colors. See a live specimen and clear AA and AAA threshold results.

Two colors. One clear result.

Opaque sRGB colors only. No alpha, gradients or photographs.

Live color specimen
Clarity is a
beautiful thing.

Good words deserve to be seen. This is normal body text at 16 CSS pixels.

—contrast ratio

    How to check a color pair

    Enter the text and background hex values, including the #. Black on white is 21:1; identical colors are 1:1. This tool evaluates the solid colors themselves, not antialiased edge pixels. Swap changes their roles without changing the ratio.

    Method and thresholds

    Each 8-bit sRGB channel is divided by 255. For a channel c ≤ 0.04045, linear c = c / 12.92; otherwise linear c = ((c + 0.055) / 1.055)2.4. Relative luminance L = 0.2126R + 0.7152G + 0.0722B. Contrast is (lighter L + 0.05) / (darker L + 0.05).

    AA normal text needs 4.5:1, AA large text 3:1, AAA normal text 7:1 and AAA large text 4.5:1. Large text means at least 18pt regular or 14pt bold (24px or about 18.67px in CSS). The decision uses the full result; the displayed decimal is truncated so a near miss never appears to reach a threshold.

    Source: W3C WCAG 2.2 contrast guidance and relative luminance definition. A passing pair alone does not establish accessibility compliance. Check focus, size, meaning, reading order and real rendering too. Use the type scale to explore size.