FreeRuns in your browser
Colour Contrast Checker
Check the contrast between a text colour and its background against WCAG 2 AA and AAA, for normal text, large text and UI components. If a pair falls short, get a suggested colour that passes while keeping the same hue.
Loading Colour Contrast Checker…
How to use it
- Enter the text (foreground) colour and the background colour as hex or rgb(), or choose them with the colour pickers.
- Read the contrast ratio and the pass/fail table.
- Check the live previews of normal text, large text and buttons.
- If it fails, ask for a suggestion for 4.5:1 or 7:1, then decide whether to use it.
Formula (WCAG 2.x)
- Each sRGB channel (0–1) is converted to linear light: c ≤ 0.04045 ? c ÷ 12.92 : ((c + 0.055) ÷ 1.055)^2.4
- Relative luminance L = 0.2126 × R + 0.7152 × G + 0.0722 × B
- Contrast ratio = (L of the lighter colour + 0.05) ÷ (L of the darker colour + 0.05), from 1:1 to 21:1
- Thresholds: AA normal text 4.5:1, AA large text 3:1, AAA normal text 7:1, AAA large text 4.5:1, and UI components and graphics 3:1 (WCAG 1.4.11).
- Pass or fail compares the exact ratio with the threshold. The ratio shown is rounded down to two decimals, so a pair that falls short never appears to pass.
- Suggestions step the text colour's HSL lightness up or down, keeping hue and saturation, and return the smallest change that reaches the target.