WCAG Contrast Checker

What is WCAG Contrast Ratio?

WCAG contrast ratio is a numerical value that measures the difference in luminance between two colors—typically text and its background. The ratio ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, pure black on pure white). The formula accounts for how humans perceive brightness differently across red, green, and blue channels, weighting green most heavily because our eyes are most sensitive to it. A higher ratio means better readability and easier visual distinction. When you pick colors from a color palette, running each text-background pair through a contrast checker ensures nothing slips through the cracks.

Why Accessibility Matters in UI Design

Accessibility is not optional—it is a fundamental requirement of good design. Globally, over 1 billion people live with some form of visual impairment. Low contrast text is the most common accessibility failure on the web, affecting not only users with visual disabilities but also people viewing screens in bright sunlight, older adults with declining vision, and anyone using a low-brightness setting to save battery. Beyond ethics, accessibility is a legal requirement in many jurisdictions. The Americans with Disabilities Act (ADA), Section 508 in the US, and the European Accessibility Act all reference WCAG standards. Non-compliance can result in lawsuits, fines, and reputational damage. Designing with accessible contrast from the start is far cheaper than retrofitting it later.

WCAG AA vs AAA Explained

WCAG 2.1 defines three conformance levels: A (minimum), AA (standard), and AAA (enhanced). Level A is so lenient that it is practically useless for real-world text readability. Level AA is the widely accepted baseline—most organizations, governments, and laws target AA compliance. It requires a 4.5:1 contrast ratio for normal text (under 18pt or under 14pt bold) and 3:1 for large text (18pt or 14pt bold and above). Level AAA is the gold standard: 7:1 for normal text and 4.5:1 for large text. AAA is recommended where possible but is often impractical for large-scale designs because it severely limits your color choices, especially for brand colors or decorative elements. Most teams aim for AA across the board and push for AAA on critical content like primary body text and navigation.

Non-Text Elements

WCAG also applies to non-text elements like icons, buttons, form input borders, charts, and graphical components. These require a minimum 3:1 contrast ratio against adjacent colors. This ensures that a submit button is distinguishable from its background, or that an error icon is visible next to a form field. Many designers focus only on text contrast and overlook icons and UI components—a common audit failure.

How to Use This Contrast Checker Tool

Using this tool is simple. Pick your text color and background color using the two color pickers at the top. The tool instantly calculates the contrast ratio and displays your pass/fail status for all four WCAG thresholds: AA Normal, AA Large, AAA Normal, and AAA Large. The live preview box shows exactly how your text will look with the chosen combination. Use the Switch button to swap foreground and background colors, or hit Random to test arbitrary combinations. If you are working with specific HEX codes from a color converter, you can also type them directly into the native color picker by clicking the HEX value field.

Best Practices for Readable UI Design

Start by choosing your background color first, then select text colors that meet at least AA contrast against it. Avoid placing text over images or gradients without a solid or semi-transparent overlay—these variable backgrounds make contrast unpredictable. For dark mode interfaces, do not simply invert your light mode colors; test contrast separately because perception changes on dark surfaces. A grey that works on white may fail on dark grey. Maintain a minimum of 4.5:1 for body text and 3:1 for large headings and interactive elements. When building a full color system, pair this checker with proven palette-building strategies to create schemes that are both beautiful and accessible from the start.

Frequently Asked Questions