Color Contrast Checker (WCAG 2.2)
Check text and background contrast against WCAG 2.2 AA and AAA, see APCA (draft) Lc, color-blind views and ΔE, get a passing color and a palette grid.
WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and interface graphics (level AA), and 7:1 / 4.5:1 for AAA. This checker computes the ratio exactly as the standard defines it, tells you which levels pass for your font size, suggests the nearest passing text color, shows how the pair looks with the three main color-vision deficiencies, and reports the newer APCA score clearly marked as a draft.
How to use this tool
- Enter the text color and the background color — HEX, rgb(), hsl(), oklch() or a CSS name.
- Set the font size and tick Bold if it applies, so the right threshold is used.
- Read the ratio and the AA/AAA results; use the suggested color if the pair fails.
- Optionally paste a palette to rate every text/background combination at once.
Formula
ratio = (L₁ + 0.05) ÷ (L₂ + 0.05), with L = 0.2126 R + 0.7152 G + 0.0722 B, where each channel c = v/255 is linearized: c ≤ 0.04045 ? c/12.92 : ((c + 0.055)/1.055)^2.4
L₁ is the lighter color. Ratios run from 1:1 (same color) to 21:1 (black on white). Results are truncated, not rounded: 4.499:1 fails AA. Large text is at least 24 px, or 18.66 px (14 pt) bold.
Example
Gray #767676 on white: 118/255 = 0.4627 linearizes to 0.1812, so the ratio is 1.05 ÷ (0.1812 + 0.05) = 4.54:1 — it passes AA for normal text but fails AAA. One step lighter, #777777 gives 4.47:1 and fails AA for body text.
Frequently asked questions
What is APCA and should I use it?
APCA (Accessible Perceptual Contrast Algorithm) is a candidate method for the future WCAG 3. It models perception better, especially for dark mode, but it is still a draft: conformance today is judged with the WCAG 2 ratio shown first.
Does a color-blind-safe pair need more than contrast?
Contrast mostly survives color-vision deficiency because it depends on lightness, but red/green distinctions can vanish. The simulation table shows each pair as people with protanopia, deuteranopia and tritanopia see it; never use color alone to carry meaning.
Do logos or disabled buttons need 4.5:1?
No. WCAG exempts logotypes, purely decorative text and inactive controls. Icons and input borders that convey information need 3:1.
Sources
Last updated:
Page address with these inputs: https://kakao.mobile/tools/color-contrast-checker/
Cite or embed this tool
kakaoCalc. (2026, November 8). Color Contrast Checker (WCAG 2.2). https://kakao.mobile/tools/color-contrast-checker/
“Color Contrast Checker (WCAG 2.2).” kakaoCalc, 8 Nov. 2026, kakao.mobile/tools/color-contrast-checker/.
Paste this code into your page. The widget runs in your visitors' browsers, shows no ads and keeps a link back to this page. Embedding terms