About the Contrast Checker
WCAG 2.x defines the contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 that of the darker one. Relative luminance is computed from linear-light sRGB: each channel is converted with the sRGB transfer curve and the channels are weighted 0.2126 R + 0.7152 G + 0.0722 B, because the eye is far more sensitive to green than to blue. The ratio runs from 1:1 (identical colors) to 21:1 (black on white), and it does not depend on which of the two colors is the text.
Success criterion 1.4.3 (level AA) requires 4.5:1 for normal text and 3:1 for large text, which means at least 18pt (24px) regular or 14pt (18.66px) bold. Criterion 1.4.6 (level AAA) raises this to 7:1 and 4.5:1. Criterion 1.4.11 requires 3:1 for the parts of user interface components and graphics that are needed to understand them: borders of inputs, icons, focus indicators. The thresholds are not rounded: #777777 on white is 4.48:1 and fails AA, while #767676 reaches 4.54:1 and is the lightest gray that passes on white.
Translucent colors have no contrast of their own, since the result depends on what is behind them. This tool blends a translucent foreground with the background, and a translucent background with white, before measuring. The suggestions keep the hue and the saturation of your color and change only the HSL lightness, in the smallest step that reaches the target, so the corrected color stays close to your palette. Logos, decorative text and disabled controls are exempt from the contrast requirements.
How to use it
- Type or pick the foreground (text) color.
- Type or pick the background color; Swap exchanges the two.
- Read the contrast ratio and the pass or fail result of each WCAG level.
- Check the preview of normal text, large text, buttons and icons.
- Click a suggested color to apply the nearest shade that passes AA or AAA.