Color Contrast Checker

A contrast ratio measures the difference in relative luminance between two colors on a scale from 1:1 (identical colors) to 21:1 (pure black on pure white). WCAG 2.1 uses this ratio to set minimum readability thresholds for text and UI elements so that people with low vision or color blindness can perceive content reliably.

AA is the baseline required by most public websites and accessibility laws: 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level: 7:1 for normal text and 4.5:1 for large text. AAA is not required for every page, but it is expected in contexts like government portals or dedicated accessibility-first products.

WCAG defines large text as 18 pt (about 24 px) or larger at a normal weight, or 14 pt (about 19 px) or larger when bold. Larger glyphs are easier to distinguish at lower contrast, so the thresholds for large text are more lenient than those for body copy.

WCAG 2.1 success criterion 1.4.11 sets a 3:1 minimum for non-text elements such as form field borders, icon strokes, focus rings, and chart lines. The UI result tells you whether your color pair is safe for those graphical objects independently of whether it passes for text.

Low contrast makes content unreadable for people with low vision, color blindness, or aging eyes, and for anyone on a screen in bright sunlight. In the US, the DOJ's 2024 ADA Title II rule sets WCAG 2.1 AA as the standard for state and local government sites, and courts have applied the ADA to business websites too; the EU's European Accessibility Act sets similar requirements. Passing WCAG contrast thresholds is one of the most concrete, testable ways to meet those obligations.