Contrast Checker

WCAG contrast ratio measures the difference in relative luminance between two colors. Luminance is the perceived brightness of a color, calculated from its RGB channels with gamma correction to match human vision. The ratio ranges from 1:1 (identical colors) to 21:1 (black on white). Higher ratios mean text is easier to read, especially for users with low vision or color blindness.

AA (minimum) requires 4.5:1 for normal text and 3:1 for large text — the legal baseline in many countries. AAA (enhanced) requires 7:1 for normal and 4.5:1 for large text — recommended for government, medical, and reading-heavy interfaces. AA is the practical target for most projects.

Large text means 18pt (24px) or larger for regular weight, or 14pt (~18.67px) for bold. The threshold is lower because the physical size makes glyphs easier to read. Body copy at 16px does not count as large text.

Swap your foreground and background — enter the dark background as background and the light text as foreground. Many designs fail dark mode because designers reverse the same pair without re-checking. Always validate both modes independently.

Yes. WCAG 1.4.11 (Non-text Contrast) requires 3:1 for icons that convey information, form borders, and focus indicators against adjacent colours.