How to use the contrast checker
- Enter the text and background colours as HEX (or any CSS colour) or pick them with the colour pickers.
- Read the ratio and the pass/fail grid, and check the sample text at normal and large sizes.
- If a level fails, click a suggested colour to apply the nearest lightness that passes while keeping the hue.
- Copy the result line for your design notes or accessibility audit.
Features
- Exact WCAG 2.x relative luminance and contrast formula
- AA and AAA results for normal and large text, plus the 3:1 non-text threshold
- Live preview with 16px body text, 24px and 14pt bold headings and a UI border sample
- Darker and lighter suggestions for AA and AAA that keep your hue
- Swap button to test the inverse pairing
The formula
Each sRGB channel is converted to linear light: c/12.92 when c ≤ 0.04045, otherwise ((c + 0.055)/1.055)^2.4, where c is the channel value divided by 255. Relative luminance is L = 0.2126·R + 0.7152·G + 0.0722·B. The contrast ratio is (L₁ + 0.05) ÷ (L₂ + 0.05) with L₁ the lighter colour, giving a value from 1:1 (identical) to 21:1 (black on white).
What the WCAG levels require
Success criteria 1.4.3, 1.4.6 and 1.4.11 set these minimums:
- AA normal text: 4.5:1. AA large text (at least 18pt, or 14pt bold, roughly 24px / 18.66px bold): 3:1.
- AAA normal text: 7:1. AAA large text: 4.5:1.
- Non-text contrast (icons, input borders, focus rings, chart lines): 3:1 against adjacent colours.
- Logos and purely decorative text are exempt; disabled controls are exempt from the minimum.
Limits of the ratio
WCAG 2 contrast is a good, widely required baseline but it treats a colour on black and on white symmetrically, which does not fully match perception. Thin fonts, small sizes and colour-vision deficiencies can make a technically passing pair hard to read, so test with real content and, where possible, real users.