WCAG Color Contrast Checker
Check the contrast ratio between a text color and background and whether it passes WCAG AA and AAA for normal and large text.
Result
- Contrast ratio4.48:1
- AA — normal text (≥4.5)FAIL
- AA — large text (≥3)PASS
- AAA — normal text (≥7)FAIL
- AAA — large text (≥4.5)FAIL
- UI components / graphics (≥3)PASS
Step-by-step
- Compute relative luminance of each color from its linearized RGB.
- Ratio = (lighter + 0.05) ÷ (darker + 0.05) = 4.478:1.
- Compare to WCAG thresholds: AA normal 4.5, AA large 3, AAA normal 7.
How to use this calculator
- Enter the text (foreground) color as a hex value.
- Enter the background color as a hex value.
- Read the contrast ratio and the AA/AAA pass-fail results.
- Aim for at least 4.5:1 (AA) for body text, 3:1 for large text.
About this calculator
Color contrast is the difference in luminance between text and its background, and it is one of the most important factors in whether people — especially those with low vision — can read your content. The Web Content Accessibility Guidelines (WCAG) define a contrast ratio from 1:1 (no contrast) to 21:1 (black on white) and set minimum thresholds: AA, the common legal standard, requires at least 4.5:1 for normal text and 3:1 for large text; AAA, the enhanced level, requires 7:1 and 4.5:1. This checker takes a text color and a background color in hex, computes their relative luminance using the official WCAG formula, and reports the ratio along with pass/fail for each level and text size. Use it to verify that your color choices are legible before shipping a design. Remember that large text is defined as 18pt (24px) regular or 14pt (18.66px) bold.
How it works — the formula
Linearize: c/255 ≤ 0.03928 ? /12.92 : ((c/255+0.055)/1.055)^2.4
Luminance L = 0.2126·R + 0.7152·G + 0.0722·B
Ratio = (L_light + 0.05) / (L_dark + 0.05)Each channel is linearized to account for gamma, weighted to perceived brightness, then the two luminances form the ratio with a 0.05 ambient term.
Worked examples
- Inputs:
- fg=#000000, bg=#ffffff
- Output:
- 21:1 — passes everything
- Inputs:
- fg=#777777, bg=#ffffff
- Output:
- 4.48:1 — fails AA normal (just under 4.5)
- Inputs:
- fg=#1a73e8, bg=#ffffff
- Output:
- 4.51:1 — passes AA normal
Limitations
- Uses WCAG 2.1 luminance; the newer APCA model (WCAG 3 draft) differs.
- Assumes opaque colors — alpha/transparency is not composited.
- Contrast is one of several accessibility considerations.
Computed per the official WCAG 2.1 formula.