Color Contrast Checker

About Color Contrast Checker

How the Contrast Ratio Is Calculated

The WCAG 2.1 contrast ratio formula uses relative luminance - a measure of how bright a colour appears to the human eye, accounting for the fact that we perceive green as much brighter than blue at the same intensity.

The formula is: Contrast Ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the darker. Relative luminance ranges from 0 (black) to 1 (white), so the contrast ratio ranges from 1:1 (identical colours) to 21:1 (black on white).

To calculate relative luminance from an sRGB colour: linearise each channel (apply gamma correction), then combine as L = 0.2126R + 0.7152G + 0.0722B. The green coefficient (0.7152) is much larger than red (0.2126) or blue (0.0722) because human vision is most sensitive to green light.

WCAG 2.1 Contrast Requirements

Level	Text Type	Minimum Ratio	What It Means
AA	Normal text (<18px or <14px bold)	4.5:1	Minimum required for most websites
AA	Large text (18px+ or 14px+ bold)	3:1	Larger text is easier to read, so the bar is lower
AA	UI components and graphics	3:1	Icons, borders, form controls
AAA	Normal text	7:1	Enhanced accessibility - recommended for body text
AAA	Large text	4.5:1	Enhanced accessibility for headings

AA is the standard that most organisations target and that legal accessibility requirements (like the ADA, EAA, and EN 301 549) reference. AAA is stricter and recommended for long-form reading content, but the W3C acknowledges that it is not always achievable for all content.

What Counts as Large Text?

Weight	Minimum Size	In CSS	In Points
Regular (400)	24px	font-size: 24px or 1.5rem	18pt
Bold (700+)	18.66px	font-size: 18.66px or ~1.17rem; font-weight: bold	14pt

The "large text" thresholds come from the WCAG specification and are based on research into character recognition at different sizes. Larger characters have more visual detail, making them readable at lower contrast ratios.

Common Colour Combinations and Their Ratios

Foreground	Background	Ratio	AA Normal	AA Large	AAA Normal
#000000 (black)	#FFFFFF (white)	21:1	Pass	Pass	Pass
#333333	#FFFFFF	12.63:1	Pass	Pass	Pass
#767676	#FFFFFF	4.54:1	Pass	Pass	Fail
#777777	#FFFFFF	4.48:1	Fail	Pass	Fail
#AAAAAA	#FFFFFF	2.32:1	Fail	Fail	Fail
#FFFFFF (white)	#0066CC (blue)	5.57:1	Pass	Pass	Fail
#FFFFFF (white)	#FF0000 (red)	3.99:1	Fail	Pass	Fail

Notice that #767676 is the lightest grey that passes AA for normal text on white. This is a useful reference point when choosing "muted" text colours. Pure red (#FF0000) on white actually fails AA for normal text - a common surprise.

Tips for Fixing Failing Contrast

Strategy	How	Example
Darken the text	Reduce lightness of foreground colour	#777 to #666 on white: 4.48 to 5.74
Lighten the background	Increase lightness of background	Dark text on #EEE vs #DDD
Increase text size	Use large text threshold (3:1 instead of 4.5:1)	Headings can use lighter colours than body text
Use bold weight	Bold text qualifies as "large" at smaller sizes (14pt+)	Bold button labels can use 3:1 ratio
Choose a different hue	Blue and red have low luminance; yellow and green have high	Replace light blue with dark blue

Contrast in Design Systems

System	Approach to Contrast
Material Design 3	Colour roles (on-surface, on-primary) guarantee 4.5:1+ pairing
Tailwind CSS	Scale from 50-950 - pair 600+ text on white, white text on 600+
IBM Carbon	All colour tokens include WCAG-compliant pairings
Apple HIG	System colours adjust automatically for light/dark mode

In Tailwind CSS, text-gray-500 (#6B7280) passes AA on white at 4.83:1, but text-gray-400 (#9CA3AF) fails at 2.54:1. This is why accessibility-conscious projects avoid gray-400 for text.

Beyond WCAG 2.1: APCA and WCAG 3

The current WCAG 2.1 formula has known limitations - it can underestimate the perceived contrast of light text on dark backgrounds and overestimate contrast for certain colour combinations. The upcoming WCAG 3.0 standard will use the APCA (Accessible Perceptual Contrast Algorithm) instead, which better models human vision. APCA uses a different scale (Lc values from 0-106) and accounts for text polarity (dark-on-light vs light-on-dark) and font size/weight together. WCAG 3 is still in Working Draft status as of 2026 and is expected to take several more years to reach Recommendation status, so WCAG 2.1 and 2.2 remain the practical baseline for conformance claims.

Why Contrast Accessibility Matters

About 2.2 billion people worldwide have a vision impairment of some kind, per the WHO 2019 World Report on Vision. Low-vision users, people with cataracts, and anyone over 40 (when age-related presbyopia and reduced contrast sensitivity set in) all benefit from higher-contrast interfaces. In the US alone, the CDC estimates over 12 million adults aged 40+ have vision impairment, and that number is growing with the ageing population.

Legal exposure is real too. The DOJ finalised ADA Title II digital accessibility regulations in April 2024, which explicitly require WCAG 2.1 Level AA conformance for state and local government web content and apps by 2026/2027 depending on entity size. The European Accessibility Act (EAA) came into force on 28 June 2025 and requires WCAG-aligned accessibility for most consumer-facing products and services sold in the EU. ADA lawsuits against private businesses for inaccessible websites hit a record high in 2024, with contrast failures cited in a large share of WebAIM's annual Million audit (which consistently finds low contrast on more than 80% of the top million home pages).

Common Contrast Mistakes Developers Make

Mistake	Why It Fails	Fix
Using placeholder text styling for real content	Placeholder greys (often #999) fail 4.5:1 on white	Keep placeholders for placeholders, use #555 or darker for real text
Red error text on white	Pure #FF0000 is only 3.99:1 - fails AA normal	Use #D32F2F or darker (~5:1) for error messages
Light blue links	#1E90FF on white is ~3.5:1 - fails AA	Use #0056B3 or darker (~5.5:1) for link text
Brand colour over brand colour	Primary on secondary often fails even if both pass on white	Check every pairing that actually renders together
Only checking light mode	Dark mode pairings have different perceptual contrast	Audit both themes - some auto-inverted colours fail
Ignoring hover and focus states	Muted hover backgrounds reduce text contrast further	Check text ratio against the hover background, not default
Text on gradient or image backgrounds	Contrast varies across the image - worst-case pixel may fail	Add a semi-transparent overlay or text shadow

WebAIM's 2024 Million report found that low-contrast text was the most common WCAG failure on the top one million home pages, appearing on 81% of sites. Missing alternative text and empty links rounded out the top three. Contrast is the single highest-leverage accessibility fix most sites can make.

Worked Example: Fixing a Failing Button

Say you have a call-to-action button with white text (#FFFFFF) on a light green background (#A3D977). White has a relative luminance of 1.0; the green works out to about 0.59. The ratio is (1.0 + 0.05) / (0.59 + 0.05) = 1.64:1 - a clear AA failure for any text size.

Option 1 - darken the background to #3E8E41 (a standard "success" green). Relative luminance drops to 0.233, giving (1.0 + 0.05) / (0.233 + 0.05) = 3.71:1. That passes AA Large only. Still not enough for a body-size button label.

Option 2 - darken further to #2E7D32. Relative luminance is about 0.168, giving (1.0 + 0.05) / (0.168 + 0.05) = 4.81:1. That passes AA Normal. If the button label is bold and at least 14pt, Option 1 would have worked - but for a safer default that works regardless of size, Option 2 is the right call. The tool above runs this search automatically and returns the closest hue-preserving shade that hits your target ratio.

How Contrast Interacts With Colour Blindness

About 1 in 12 men (8%) and 1 in 200 women have some form of colour vision deficiency, per the NHS, with red-green deficiency being by far the most common. Contrast ratio alone does not guarantee that colour-blind users can distinguish a red failure message from a green success message - if both have similar luminance, they may look identical under protanopia or deuteranopia. Follow two rules: meet WCAG contrast minimums AND do not rely on colour alone to convey information. Add icons, labels, or patterns alongside colour coding. The Colour Palette Generator can help build swatches that remain distinguishable under simulated colour vision deficiencies.

Contrast Testing in a CI/CD Pipeline

Checking contrast manually is fine for small projects, but larger codebases benefit from automated testing. Popular options include axe-core (used by Deque's axe DevTools, Cypress-axe, and Pa11y), Lighthouse accessibility audits, and WebAIM's WAVE. These tools flag contrast failures at build or CI time before they reach production. A practical setup is running Lighthouse in a GitHub Action on every pull request and failing the build if the accessibility score drops below a threshold (typically 95+). For component-level verification during design, Figma has a built-in contrast plugin, and Stark is a widely used cross-tool audit suite. Tool-level checks catch roughly 30-50% of WCAG issues automatically (per Deque's own research); the rest still require manual review, especially for dynamic content and interaction states.

To convert colours between HEX, RGB, and HSL formats, the Colour Converter handles that. For building full palettes with accessible pairings, the Colour Palette Generator is a good next step. Everything runs in your browser - no data is sent anywhere.

Sources

• W3C - WCAG 2.1 Contrast (Minimum) Success Criterion
• W3C WAI - Technique G18: Ensuring Contrast of at Least 4.5:1
• WebAIM - The WebAIM Million Accessibility Report
• WHO - World Report on Vision (2019)
• US Department of Justice - ADA Title II Web and Mobile App Accessibility Rule
• European Commission - European Accessibility Act
• APCA - Accessible Perceptual Contrast Algorithm Introduction