Colour Contrast Checker
Check your text and background colour combinations against WCAG AA and AAA accessibility standards. Get contrast ratios and fix suggestions instantly.
Quick Presets
Preview Text
This is how your text will appear on the background.
The quick brown fox jumps over the lazy dog
Contrast Analysis
Contrast Ratio
21.00:1
Higher ratios indicate greater contrast and better accessibility
WCAG AA
WCAG AAA
Requires 7:1 ratio
Accessibility Requirements
- 4.5:1Required for normal text (AA standard)
- 3:1Required for large text and UI components (AA standard)
- 7:1Required for enhanced accessibility (AAA standard)
What Contrast Ratio Do I Need?
WCAG AA - the legal accessibility standard for most websites - requires 4.5:1 contrast for normal body text and 3:1 for large text (18pt or 14pt bold and above). UI components like buttons and form borders need at least 3:1 against their background. The stricter AAA standard, which you should aim for on critical reading content like long-form articles, demands 7:1 for normal text and 4.5:1 for large text.
Black on white sits at 21:1 - the maximum possible. Pure white on a mid-grey #777777 lands at exactly 4.48:1 and fails AA by a hair. Light grey #999 on white is 2.85:1 and fails everything. The contrast checker calculates the WCAG ratio using the relative luminance formula (it weighs green more than red and red more than blue, matching how human eyes perceive brightness).
Why Contrast Matters Beyond Compliance
About 8% of men and 0.5% of women have some form of colour vision deficiency. People over 40 lose contrast sensitivity gradually, and outdoor screen use in bright sunlight effectively halves the contrast you experience indoors. Designing to WCAG AA is not just legal cover - it is what makes your interface readable for the actual humans using it on a phone in a sunlit cafe.
The classic mistake is using brand colours that look great on a designer's calibrated monitor but fail on real devices. A subtle medium-grey body text at #888888 on white renders as 3.54:1 - it looks elegant in mockups and unreadable on a Kindle. The checker gives you nearby accessible variations: bumping #888 down to about #6b6b6b clears AA, and #595959 clears AAA, with minimal visual change for sighted users.
Common Combinations That Just Work
Black (#000000) on white (#FFFFFF) is the universal safe choice at 21:1. Dark navy #1a365d on pale blue #e0f2fe lands around 9.8:1 and clears AAA easily. White (#FFFFFF) on the standard accent blue #2563eb sits at 6.39:1 - clears AA for normal text and AAA for large. Dark on cream (#1a1a1a on #fffef0) is around 18.5:1 and works beautifully for long reading.
Combinations to avoid: any pastel on white, any colour on a similar hue (red text on pink, blue on light blue), and most coloured-on-coloured combinations except true complements. Yellow on white is almost always a fail. Red on green is the worst possible choice for the 8% of people with red-green colour blindness because the two colours look identical to them. Use the [colour palette generator](/colour-palette-generator) to pick palettes with built-in contrast headroom.
Frequently Asked Questions
What is WCAG AA versus AAA?
AA is the standard most regulators require: 4.5:1 contrast for normal text, 3:1 for large text. AAA is the enhanced level: 7:1 for normal, 4.5:1 for large. AAA is appropriate for content people read for extended periods (news articles, documentation). For interface chrome and short labels, AA is plenty and AAA can force visually heavy designs.
Does contrast apply to icons and logos?
Logos are exempt from WCAG contrast requirements because brand identity overrides accessibility for that one element. Functional icons (a search magnifying glass, a hamburger menu) need 3:1 contrast against their background under WCAG 2.1 because users have to identify them to use the interface. Decorative icons that have a text label next to them have no contrast requirement on their own.
How do I fix failing contrast without changing my brand colours?
Three options. First, use the brand colour for accents and headings only, with body text in near-black on white. Second, place the brand colour against a contrasting background (white text on the brand colour, instead of brand colour on white). Third, darken or lighten the brand colour by 20 to 30% for body text use - call it 'brand dark' as a separate variable. The checker's nearby accessible suggestions show you exactly how far to nudge.
What contrast ratio do I need for buttons?
Button text needs 4.5:1 against the button background under AA (3:1 if the text is 18pt or larger). The button background also needs 3:1 against the surrounding page background, which catches the common mistake of pale-blue buttons on white. Disabled buttons are exempt from text contrast rules but still need to look visibly different from active buttons.
Related Tools
Colour Contrast Checker
Check if your text and background colours meet WCAG accessibility standards (AA & AAA). Auto-fix suggestions included
Colour Palette Generator
Generate beautiful colour palettes instantly. Choose from random, monochromatic, analogous, complementary, triadic, pastel, and more. Lock colours, copy hex codes, download as PNG.
Font Pair Suggester
Select a heading font from 20 Google Fonts. Get recommended complementary body fonts with live preview and CSS import code.