What colors pass WCAG AA contrast on white background?

On a white (#FFFFFF) background, colors must have a relative luminance of 0.18 or lower to achieve 4.5:1 contrast. This means: dark blues (#0000FF passes, #4444FF just fails), dark greens (#006400 passes), dark reds (#8B0000 passes). Light colors like yellow, light pink, light green, and light blue all fail on white. Use this checker to test any specific color instantly.

What is color blindness simulation in contrast checking?

Color blindness simulation shows how your color pair appears to users with color vision deficiencies. The main types: Deuteranopia (green blindness, most common in males, 1% of population), Protanopia (red blindness), Tritanopia (blue blindness, rare). A design that passes contrast for normal vision may fail or look very different for colorblind users. Always test your most important color pairs with colorblindness simulation.

Wcag contrast checker for text and background

Enter or pick your text color as the foreground and your background color. The checker shows the exact contrast ratio and whether it passes WCAG AA (4.5:1 for normal text) and AAA (7:1). If it fails, the auto-fix section shows the nearest color that passes, which you can apply with one click.

How to check color contrast for buttons and UI components?

For buttons, check the contrast between the button border or background color and the surface color behind the button. WCAG 2.1 Level AA requires 3:1 for UI components. The button text color vs button background must also meet 4.5:1. Check all three: button background vs page background (3:1), button text vs button background (4.5:1), and button border vs page background (3:1 if relying on border to identify the button).

Color Contrast Ratio Checker (WCAG live)

Q: What is the WCAG color contrast ratio requirement?

WCAG 2.1 defines contrast requirements at two compliance levels. Level AA (minimum): normal text requires 4.5:1 contrast ratio, large text (18pt+ or 14pt bold) requires 3:1, UI components and graphics require 3:1. Level AAA (enhanced): normal text requires 7:1, large text requires 4.5:1. These ratios compare the relative luminance of the foreground color against the background using the WCAG formula.

Q: How is color contrast ratio calculated?

The WCAG contrast ratio formula is: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance converts sRGB values to a linear scale: each channel is divided by 255, linearized (gamma correction), then combined as 0.2126R + 0.7152G + 0.0722B. The ratio ranges from 1:1 (identical colors) to 21:1 (black on white).

Q: What is WCAG AA vs AAA contrast?

WCAG AA (Level AA) is the minimum accessibility standard required by most accessibility laws including ADA, EAA, and EN 301 549. It requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA (Level AAA) is the enhanced standard requiring 7:1 for normal text and 4.5:1 for large text. Most organizations target AA compliance as their minimum. AAA is recommended for healthcare, government, and financial applications serving users with visual impairments.

Q: What is large text in WCAG?

WCAG defines large text as 18 point (24px at 96dpi) or larger, or 14 point (18.5px) or larger if bold. Large text has a lower contrast requirement (3:1 for AA, 4.5:1 for AAA) because larger characters are easier to read at lower contrast. Normal text below these sizes requires the stricter 4.5:1 ratio for AA compliance.

Q: Color contrast checker online free

Use the live color pickers above to select foreground and background colors, or enter HEX, RGB or HSL values. The contrast ratio updates instantly. All 5 WCAG pass/fail checks are shown: AA Normal (4.5:1), AA Large (3:1), AA UI (3:1), AAA Large (4.5:1), AAA Normal (7:1). Free, no account, browser-side.

Q: How to check color contrast for accessibility?

1. Identify the foreground color (text or UI element color) and background color. 2. Enter both colors in this tool using the color pickers or HEX values. 3. Check the contrast ratio against WCAG requirements: 4.5:1 for normal text (AA), 3:1 for large text (AA). 4. If the ratio is too low, use the auto-fix suggestions to find a passing color, or adjust manually until the ratio reaches the required level.

Q: What is 4.5:1 contrast ratio for text?

A 4.5:1 contrast ratio is the WCAG Level AA minimum for normal text (text below 18pt / 24px). Medium gray (#767676) on white (#FFFFFF) achieves exactly 4.5:1. Black on white achieves 21:1 — the maximum. Any color combination with a ratio below 4.5:1 for normal text fails WCAG AA and may be unreadable for users with low vision or in challenging lighting conditions.

Q: Does background color affect WCAG contrast?

Yes. Contrast is always measured between the foreground element (text, icon, button border) and the background behind it. If text appears on a gradient background, you must check contrast at the point where contrast is lowest. If text appears on an image, check the darkest and lightest parts of the background. Semi-transparent overlays require checking the actual rendered color, not just the overlay color.

Q: What is relative luminance in color contrast?

Relative luminance is a perceptual measure of how bright a color appears to the human eye, ranging from 0 (absolute black) to 1 (absolute white). It weights the RGB channels based on human color perception: 21.26% red, 71.52% green, 7.22% blue. The high green weight reflects that human eyes are most sensitive to green wavelengths. The WCAG formula linearizes the sRGB color space before calculating luminance to account for gamma correction.

What Is Color Contrast?

Color Contrast & WCAG — Why It Matters and How It Is Measured

Color contrast is the difference in perceived brightness between two colors. When text has insufficient contrast against its background, it becomes difficult or impossible to read for users with low vision, color blindness, or visual fatigue. According to WebAIM’s 2024 Million report, color contrast is the single most common accessibility failure on the web — present on 83.6% of all websites tested. It is simultaneously the most impactful and easiest accessibility improvement you can make.

The WCAG 2.1 contrast ratio formula

WCAG (Web Content Accessibility Guidelines) defines contrast mathematically using relative luminance — a perceptual measure of how bright a color appears to the human eye, expressed as a value between 0 (absolute black) and 1 (absolute white). The formula first linearizes the sRGB values to remove gamma encoding, then weights the three channels by their contribution to human luminance perception: 0.2126 for red, 0.7152 for green, 0.0722 for blue. The extremely high green weight reflects that the human eye is most sensitive to green wavelengths in its M-cone cells.

The contrast ratio is then: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The +0.05 offset prevents division by zero for absolute black and anchors the scale. The ratio ranges from 1:1 (identical colors, no contrast) to 21:1 (black #000000 on white #FFFFFF).

The five WCAG compliance checks explained

Check	Ratio required	Applies to	Standard
AA Normal text	4.5:1	Body text, UI labels, links (text below 18pt / 24px regular, or 14pt / 18.5px bold)	WCAG 2.1 §1.4.3
AA Large text	3:1	Heading text at 18pt+ regular (24px+) or 14pt+ bold (18.5px+)	WCAG 2.1 §1.4.3
AA UI components	3:1	Button borders, input field borders, icons, focus indicators — non-text elements	WCAG 2.1 §1.4.11
AAA Large text	4.5:1	Same as AA Large text but at enhanced level	WCAG 2.1 §1.4.6
AAA Normal text	7:1	Same as AA Normal text but at enhanced level	WCAG 2.1 §1.4.6

Common Examples

Color Contrast Reference — Common Color Combinations & Their Ratios

Click any pair in the preset buttons above the calculator to load them instantly.

Foreground	Background	Ratio	AA Normal	AA Large	AAA
#000000 (Black)	#FFFFFF (White)	21:1	PASS	PASS	PASS
#FFFFFF (White)	#000000 (Black)	21:1	PASS	PASS	PASS
#595959	#FFFFFF (White)	7.0:1	PASS	PASS	PASS (AAA!)
#767676	#FFFFFF (White)	4.54:1	PASS	PASS	FAIL
#999999	#FFFFFF (White)	2.85:1	FAIL	FAIL	FAIL
#0066CC	#FFFFFF (White)	5.74:1	PASS	PASS	FAIL
#1D4ED8	#EFF6FF	7.04:1	PASS	PASS	PASS (AAA!)
#6366F1	#FFFFFF (White)	4.47:1	FAIL (just!)	PASS	FAIL
#FFFFFF	#6366F1	4.47:1	FAIL (just!)	PASS	FAIL
#000000	#FBBF24 (Amber)	11.67:1	PASS	PASS	PASS (AAA!)

Note: Our brand color #6366f1 (indigo-500 in Tailwind) has a 4.47:1 ratio on white — just barely failing AA for normal text. This is a known characteristic of indigo-500 — use it as an accent or heading color, not for body text on white.

Legal Requirements

Color Contrast & the Law — ADA, EAA, Section 508

⚖️

United States — ADA and Section 508 — The Americans with Disabilities Act (ADA) requires websites serving the public to be accessible. While the ADA does not specify WCAG directly in its text, US courts have consistently ruled that WCAG 2.1 Level AA is the benchmark for accessibility compliance. Notable cases including Robles v. Domino’s Pizza (2019) and other ADA website litigation have cited color contrast failures as accessibility violations. The DOJ’s 2024 rule explicitly adopted WCAG 2.1 AA for state and local government websites. Section 508 requires federal government agencies and contractors to meet WCAG 2.0 Level AA.

🇪🇺

European Union — EAA (European Accessibility Act) — The European Accessibility Act (Directive 2019/882) became mandatory from 28 June 2025 for products and services including websites, mobile apps, e-commerce, banking, and telecommunications sold in the EU. It references EN 301 549 which in turn references WCAG 2.1 Level AA as the technical standard. Non-compliance may result in market access restriction and fines. All EU-facing websites and apps targeting consumers must now meet WCAG 2.1 AA, including all contrast requirements.

🇬🇧

United Kingdom — Public Sector Bodies Accessibility Regulations — The UK Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018 require UK public sector organisations to meet WCAG 2.1 Level AA. Private sector requirements are covered by the Equality Act 2010, which requires reasonable adjustments for disabled users. The UK adopted EN 301 549 (which references WCAG 2.1 AA) as its accessibility standard post-Brexit.

Fixing Contrast Issues

How to Fix Color Contrast Accessibility Issues

The auto-fix suggestions above are the fastest starting point. Here is the broader strategy.

➡️

Darken the text color — most common fix — If your text is too light on a white or light background, darken it by reducing the L (lightness) value in HSL. Keep the same hue and saturation to stay on-brand. The auto-fix button in this tool finds the minimum lightness adjustment needed to pass. For colored text (blue, green, red), darkening by 10–20% lightness points often achieves AA compliance while keeping the color identity.

➡️

Lighten the background — second most common fix — If you are using a colored background, lightening it towards white increases contrast for dark text on top. Moving from a mid-range background to a very light tint (5–10% lightness) significantly boosts contrast while keeping the color family. Light blue, light green, and light purple backgrounds all work well with dark text.

➡️

Use white text on dark backgrounds instead of black on light — Dark backgrounds with white text can be highly accessible. White (#FFFFFF) on your brand’s primary dark color is often the best solution for maintaining visual identity. The trade-off is that extremely dark backgrounds (pure black) can cause halation for users with astigmatism — consider #121212 or #1e1e1e instead of #000000.

➡️

Large text has more flexibility — design your type scale — Remember that WCAG only requires 3:1 for large text (18pt+ / 24px+). Design your type scale to use large text for section headings where your brand color may not achieve 4.5:1 on all backgrounds. Use darker shades for body text where the 4.5:1 requirement applies. This lets you keep vibrant brand colors in headings while ensuring body text is fully compliant.

➡️

Do not rely solely on color — provide additional cues — WCAG 1.4.1 requires that color is not the only visual means of conveying information. For links, do not remove underlines unless the link text has 3:1 contrast against surrounding body text (in addition to 4.5:1 against the background). For form errors, show both a red border AND an error icon or message text. For charts, use patterns in addition to colors.

Comparison

LazyTools vs Other Color Contrast Checkers

Feature	LazyTools	WebAIM	Coolors	colourcontrast.cc
Live visual color picker	✅ Both colors	✅ Yes	✅ Yes	✅ Yes
HEX + RGB + HSL input	✅ All 3 formats	⚠ HEX/RGB only	⚠ HEX/RGB only	⚠ HEX/RGB
All 5 WCAG checks simultaneously	✅ AA+AAA text+large+UI	⚠ 4 checks (no UI)	⚠ 4 checks	✅ Yes
Auto-fix suggestion	✅ Nearest passing color	⚠ Lightness slider	❌ None	❌ None
Color blindness simulation	✅ 4 types with ratio	❌ None	❌ None	❌ None
CSS output	✅ Copy-ready	❌ None	❌ None	❌ None
Relative luminance shown	✅ Both colors	❌ No	❌ No	❌ No
No account required	✅ Yes	✅ Yes	✅ Yes	✅ Yes

FAQ

Color Contrast FAQ

What is the WCAG color contrast ratio requirement?▾

WCAG Level AA: 4.5:1 for normal text, 3:1 for large text (18pt+) and UI components. WCAG Level AAA: 7:1 for normal text, 4.5:1 for large text. Enter any two colors above to check all five WCAG ratios instantly.

How is color contrast ratio calculated?▾

WCAG formula: (L1 + 0.05) / (L2 + 0.05) where L = relative luminance (0 to 1). Relative luminance = 0.2126R + 0.7152G + 0.0722B (linearized sRGB). Ranges from 1:1 (same color) to 21:1 (black on white).

What is WCAG AA vs AAA contrast?▾

AA is the minimum standard required by most laws (ADA, EAA, Section 508): 4.5:1 for text. AAA is enhanced: 7:1 for text. Most organisations target AA. AAA is recommended for healthcare, government and financial apps. Both are checked simultaneously above.

What is large text in WCAG?▾

18pt (24px at 96dpi) or larger regular weight, or 14pt (18.5px) or larger bold. Large text requires only 3:1 for AA. Normal text below these sizes requires 4.5:1. Headings are often large text; body text is almost always normal text.

Color contrast checker online free▾

Use the live color pickers or enter HEX, RGB, or HSL values. Contrast ratio updates instantly. All 5 WCAG checks shown. Auto-fix suggestions find the nearest passing color. Color blindness simulation. CSS output. Free, no account, browser-side.

How to check color contrast for accessibility?▾

1. Identify text color (foreground) and background color. 2. Enter both in the pickers above. 3. Check contrast ratio against your target: 4.5:1 for AA normal text. 4. If failing, click the auto-fix suggestion to find a passing alternative.

What is 4.5:1 contrast ratio for text?▾

The WCAG Level AA minimum for normal text. #767676 on white achieves exactly 4.54:1 — the minimum passing gray. Any lighter gray on white fails AA. Black on white achieves 21:1. Enter any color in the checker above to see its exact ratio.

Does background color affect WCAG contrast?▾

Yes. Always measure foreground against the actual background behind it. For gradient backgrounds, check at the point of lowest contrast. For text on images, check the rendered color (darkest and lightest parts). Semi-transparent overlays require checking the composited color.

What is relative luminance in color contrast?▾

Perceptual brightness 0-1. Formula: 0.2126R + 0.7152G + 0.0722B (linearized). The high green weight (71.52%) reflects human color sensitivity. Shown for both colors above the ratio in this checker.

What colors pass WCAG AA on white?▾

On white (#FFF), colors need relative luminance ≤ 0.18 for 4.5:1. Dark blues, dark greens, dark reds pass. #767676 is the minimum passing gray. Light colors (yellow, light pink, light blue) all fail on white. Enter any color to test instantly.

What is color blindness simulation?▾

Shows how your color pair appears to users with color vision deficiencies: Deuteranopia (green-blind, ~1% of males), Protanopia (red-blind, ~1%), Tritanopia (blue-blind, ~0.01%). A pair passing normal contrast may look very different to colorblind users. Check all 4 views in the simulation section above.

How to fix color contrast accessibility issues?▾

1. Darken foreground color (reduce HSL lightness). 2. Lighten background towards white. 3. Use the auto-fix button — it finds the nearest passing color. 4. Consider a different hue with better contrast properties. 5. Use large text where possible (requires only 3:1).

Is WCAG contrast required by law?▾

In many jurisdictions, yes. US: ADA (WCAG AA interpreted as standard), Section 508 (federal). EU: European Accessibility Act (WCAG 2.1 AA mandatory from June 2025). UK: Public sector must meet WCAG 2.1 AA. Private sector: Equality Act applies.

What is WCAG 2.2 color contrast?▾

WCAG 2.2 (2023) did not change the contrast ratio requirements. They remain 4.5:1 (AA normal), 3:1 (AA large/UI), 7:1 (AAA normal). WCAG 2.2 added focus indicator contrast requirements and other criteria, but the core luminance formula and thresholds are unchanged from 2.1.

What contrast ratio does #767676 have on white?▾

#767676 has exactly 4.54:1 on white — the minimum gray that passes WCAG AA for normal text. Any lighter gray fails AA on white. Click the "Min AA" preset button above to see this pair instantly.

How to check contrast for buttons and UI components?▾

WCAG 2.1 §1.4.11 requires 3:1 for UI components. Check: button border vs page background (3:1), button text vs button background (4.5:1). The "AA UI components" check in this tool shows the 3:1 check. Enter the button border color as foreground and page background as background to verify.

Related tools