Color Contrast Ratio Calculator
Check the WCAG 2.2 contrast ratio of any text and background color (hex, rgb, hsl or color name, with transparency): AA and AAA for normal and large text, 3:1 for UI components, the nearest passing color and an optional APCA Lc (draft) score.
How it works
Contrast ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05), where L = 0.2126 R + 0.7152 G + 0.0722 B and each channel is linearised: c ≤ 0.04045 → c ÷ 12.92, otherwise ((c + 0.055) ÷ 1.055)^2.4
WCAG 2.2 measures how readable two colors are together by comparing their relative luminance, which is how bright each color looks once the gamma curve of sRGB is undone and the red, green and blue channels are weighted by how sensitive the eye is to each. The ratio runs from 1:1 (identical colors) to 21:1 (black on white). Success criterion 1.4.3 (level AA) asks for 4.5:1 for normal text and 3:1 for large text; 1.4.6 (AAA) raises that to 7:1 and 4.5:1; 1.4.11 asks for 3:1 for the parts of buttons, form fields, focus rings, icons and charts that people need to see. Large text is 24 px and up, or 18.66 px and up in bold. WCAG compares the exact ratio, so 4.49:1 fails 4.5:1 — this calculator rounds down when it displays the ratio for that reason. Semi-transparent colors are blended onto what is behind them before measuring. When a pair fails, the calculator walks the text color (and separately the background) lighter or darker at the same hue and saturation until it reaches your chosen level, and shows the smallest change that works. The optional APCA score is a newer, polarity-aware method being drafted for WCAG 3; it gives a signed Lc value instead of a ratio and is shown for information only.
Worked example
Gray text #777777 on white: each channel is 119 ÷ 255 = 0.4667, which linearises to 0.1845, so its luminance is 0.1845; white is 1. The ratio is (1 + 0.05) ÷ (0.1845 + 0.05) = 4.48:1 — it passes for large text and UI components but fails AA for normal text. One step darker, #767676 (ratio 4.54:1), is the nearest gray that passes AA at 16 px.
Sources: W3C — Understanding SC 1.4.3 Contrast (Minimum), WCAG 2.2 · W3C — WCAG 2.2 definition of relative luminance · W3C — Understanding SC 1.4.11 Non-text Contrast · Myndex — APCA contrast calculator (draft for WCAG 3)
Frequently asked questions
What counts as large text?
At least 18 point (24 CSS px) at normal weight, or 14 point (about 18.66 px) in bold. Large text needs only 3:1 for AA and 4.5:1 for AAA, because bigger strokes stay readable at lower contrast.
Which contrast applies to buttons, icons and form fields?
WCAG 1.4.11 (non-text contrast, level AA) asks for 3:1 between a component's visual boundary or state indicator and the colors next to it — for example a text field border against the page, or a focus outline. The text inside a button still needs 4.5:1 against the button fill.
How does the nearest passing color work?
It keeps the hue and saturation of your color and changes only its HSL lightness, a little at a time, in both directions, then shows the first 8-bit color that meets the level you picked. That usually keeps the brand look while fixing the contrast. If neither direction reaches the level, no color of that hue can work on that background and you need to change the other color.
How are transparent colors handled?
An rgba(), hsla() or 8-digit hex color is blended onto what is behind it first, then the blended color is measured — the same thing a browser does when it draws it. A see-through background is laid over the page color you choose under More options; the notes show the ratio over the opposite page color too.
What is APCA and should I use it?
APCA (Accessible Perceptual Contrast Algorithm) is a draft method for the future WCAG 3. It accounts for text size, weight and whether the text is lighter or darker than the background, and reports a score called Lc. It is useful for design decisions, but no law or current standard requires it — meet WCAG 2.2 AA first.
Does color blindness affect this?
The ratio is based on luminance, which people with the common forms of color blindness still see, so a good ratio helps everyone. It does not make red and green distinguishable by hue, so never use color alone to carry meaning.
Related calculators
This calculator is for educational purposes. Double-check important results before acting on them.