WCAG Color Contrast: AA and AAA Ratios Explained
Understand text contrast thresholds, relative luminance, large text rules, and how to test foreground/background pairs.
Contrast measures the luminance difference between foreground and background. It helps assess whether text is readable for people with reduced vision or contrast sensitivity. Test the colors that actually touch in the rendered interface, including hover states, muted labels, badges, and error messages.
Interpret the thresholds correctly
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA raises those values to 7:1 and 4.5:1. Large text means at least 18pt regular or 14pt bold, approximately 24px or 18.67px in CSS. Evaluate font size and weight together. Do not round a ratio upward to claim a pass when the underlying value is below the threshold.
Calculate using luminance, not visual guesses
The standard method converts sRGB channels to linear light, combines them with weighted coefficients, and compares lighter and darker luminance after adding 0.05. Our checker evaluates opaque HEX pairs with that formula. Two vivid colors can still have similar luminance and poor text contrast. Hue difference alone is not a reliable indicator.
Test the actual background and state
An alpha color must be composited against its background before testing. Gradients and images can produce multiple local contrast values, so a single flat pair is insufficient. Contrast results also do not assess keyboard behavior, labels, reading order, or screen-reader support. Use this checker as one focused test within a broader accessibility review, and verify disabled or decorative exceptions against the relevant criterion before applying them.
Worked example
Foreground: #000000
Background: #ffffff
Contrast: 21:1Does passing a contrast checker mean a page is WCAG compliant?
No. A color-pair check covers only a small part of accessibility and does not establish overall conformance.
Reference and further reading
KEEP EXPLORING
Another useful idea.
How to Build an Accessible UI Color Palette
Choose and test semantic color pairs for buttons, labels, focus indicators, and dark mode interfaces.
Color Contrast Checker: Choose Accessible Text Colors
color contrast checker: Choose accessible text and background colors by checking contrast ratios and testing interface states beyond the default view.
PX vs REM in CSS: Conversion and Practical Differences
Learn the px-to-rem formula, root font-size behavior, browser defaults, and common conversion mistakes.