Contrast Checker — WCAG 2.1 AA & AAA
Check any foreground and background colour pair against WCAG 2.1 AA and AAA accessibility standards. Results update instantly as you type.
Foreground (Text)
Background
Preview
Large Text Sample
Normal body text at regular size. This is how your color combination looks in a real context.
UI element / label text
Contrast Ratio
WCAG minimum: 4.5:1 (AA normal text) · 3:1 (AA large text)
WCAG 2.1 Results
About WCAG Levels
AA — Minimum accessibility. Required for most legal compliance (4.5:1 normal, 3:1 large).
AAA — Enhanced accessibility. Recommended for critical content (7:1 normal, 4.5:1 large).
Why Contrast Matters
Colour contrast is one of the most common and impactful accessibility failures on the web. When text or UI elements don't have sufficient contrast against their background, they become difficult or impossible to read — particularly for users with low vision, colour blindness, or anyone viewing a screen in poor conditions.
WCAG 2.1 sets clear, measurable contrast thresholds: AA for broad compliance, AAA for the highest level of accessibility. This tool calculates your contrast ratio instantly so you can make confident design decisions without guesswork.
- Low contrast makes text hard to read for users with visual impairments
- WCAG AA compliance is required for most public-facing and legal contexts
- Poor contrast fails users on mobile screens in bright light
- Colour combinations that look fine to some users may be invisible to others
- Catching contrast issues early avoids costly accessibility retrofits later
How to Use This Tool
Enter your colour pair
Type HEX values for your foreground (text) and background colours, or use the colour pickers to select them visually. Use Swap to reverse the pair.
See the contrast ratio
The contrast ratio updates instantly. The preview shows exactly how your colour combination looks at different text sizes and as a UI element.
Check your WCAG level
Results are shown for WCAG 2.1 AA and AAA across normal text, large text and UI components — so you know exactly what passes and what needs adjustment.
Understanding WCAG Contrast Levels
AA — Normal Text
4.5 : 1
The minimum contrast ratio required for body text and small UI labels. This is the baseline for legal and regulatory compliance in most jurisdictions.
AA — Large Text
3 : 1
Applied to text that is at least 18pt (24px) or 14pt bold (approximately 18.67px). Large headings have a lower threshold because they are easier to read at lower contrast.
AAA — Normal Text
7 : 1
The enhanced accessibility level for body text. AAA is recommended for critical content, medical or legal information, and any interface where reading accuracy is essential.
AAA — Large Text
4.5 : 1
Enhanced contrast for large text elements. Achieving AAA across your interface signals a strong commitment to inclusive, accessible design.
Who This Tool Is For
Common Questions
What is a contrast ratio?
A contrast ratio expresses the difference in relative luminance between two colours on a scale from 1:1 (identical colours, no contrast) to 21:1 (black on white, maximum contrast). WCAG uses this ratio to define accessibility thresholds.
What is the minimum contrast ratio for WCAG AA?
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text (18pt or 14pt bold). UI components and graphical elements also require at least 3:1.
What is the difference between WCAG AA and AAA?
AA is the widely accepted compliance baseline — legally required in many contexts. AAA is the enhanced level, requiring 7:1 for normal text and 4.5:1 for large text. AAA is recommended for high-stakes content but not always achievable across an entire interface.
Does contrast ratio apply to coloured text on coloured backgrounds?
Yes — the contrast ratio is calculated from the relative luminance of any two colours, regardless of hue. A bright yellow on white may have very low contrast even though both colours are visually distinct to some viewers.
Is this contrast checker free?
Yes — completely free with no account required. All calculations run in your browser using the WCAG 2.1 relative luminance formula.
More Colour Tools
Once your colours pass the contrast check, put them to use. Convert between HEX, RGB and HSL formats, or generate full coordinated palettes for your project.