Check Color Contrast for Accessibility
Test foreground and background colors against WCAG ratios
The quick brown fox
Normal text sample for WCAG testing
Small text, 11px
AA Normal text
WCAG 2.1 AA — body text, links — requires 4.5:1
AA Large text
WCAG 2.1 AA — 18pt+ or bold 14pt+ — requires 3:1
AAA Normal text
WCAG 2.1 AAA — enhanced contrast — requires 7:1
AAA Large text
WCAG 2.1 AAA — large text enhanced — requires 4.5:1
UI Components
WCAG 2.1 — icons, inputs, focus rings — requires 3:1
Use this Color Contrast Checker to test whether foreground and background colors are readable enough for digital interfaces. It helps designers, frontend developers, accessibility reviewers, product teams and students check contrast ratios for text, buttons, links, icons, inputs and UI states before colors reach production. A color pair can look attractive in a palette but fail when used as real text on a real background. This tool helps you review WCAG AA and AAA contrast expectations, compare color combinations and make more confident design decisions for accessible websites and applications.
How to Check Color Contrast for Accessibility
Pick your foreground and background colors — contrast ratio and WCAG results appear instantly.
Enter your foreground and background colors
Click the color swatches or type hex values directly into the input fields for your text color (foreground) and background color. The contrast ratio updates in real time with every change. You can also use the color picker to browse and select colors visually.
Read the WCAG compliance results
Five WCAG 2.1 conformance levels are checked simultaneously. Each shows a pass (green) or fail (red) badge: AA Normal Text (4.5:1 minimum, for body text under 18pt), AA Large Text (3:1, for text 18pt or 14pt bold and above), AAA Normal Text (7:1), AAA Large Text (4.5:1), and UI Components and Graphics (3:1 for icons, borders, and input outlines). The exact contrast ratio is displayed prominently.
Apply the nearest passing color
If your color pair fails a level you need to pass, click the Suggest nearest passing color button. The tool calculates the closest hex color (in RGB space) that meets the target contrast ratio and shows it as a preview. Click Apply to update your foreground or background color to the suggested value and confirm the new pair passes.
Features
Calculates contrast ratio between foreground and background colors
Checks WCAG AA and AAA expectations for normal and large text
Tests UI component contrast for borders, icons and controls
Compares hex color pairs before they enter production designs
Previews readability with real foreground and background combinations
Identifies low-contrast pairs that may be hard to read
Helps designers choose accessible text, link and button colors
Supports design-system reviews for themes, tokens and UI states
Guides practical color adjustments without guessing by eye
Improves accessibility checks during frontend and design workflows
What This Tool Helps You Do
Check whether two colors have enough contrast for readable text and visible UI elements. A color combination can look attractive in a palette but still fail when used as body text, buttons, links, form borders or icons.
This checker helps you test the actual foreground and background pair before it becomes part of a website, app or design system.
Why Contrast Is More Than a Design Preference
Contrast affects whether people can read and use an interface comfortably. Small text, muted links, pale buttons and low-contrast form states can create real usability problems, especially on mobile screens, low-brightness displays or bright outdoor conditions.
The unique point with contrast is that colors should be tested in pairs. A brand color may work on white but fail on a tinted background. A dark mode color may pass for headings but fail for small helper text.
Practical Ways to Use This Tool
- Test text color against page and card backgrounds
- Check button labels before finalizing UI components
- Review link colors for readability inside paragraphs
- Validate icon, border and focus-state visibility
- Compare theme tokens from a Color Palette Generator
- Pair spacing and typography decisions with a CSS Unit Converter
- Check small favicon or brand colors with a Favicon Generator
- Review dark mode and light mode color pairs separately
What to Check Before Shipping
Do not test only the primary brand color. Check real UI states: hover, active, disabled, error, success, focus and placeholder text. Also test colors at the actual font size and weight used in the design because large text and small text have different readability expectations.
If a pair fails, do not always change the brand color first. Sometimes adjusting the background, using a darker text token or creating an accessible alternate shade is the cleaner fix.
Expert Tips
Create separate color tokens for text, surfaces, borders and actions instead of reusing one accent everywhere. Keep high-contrast options available for important calls to action. In design systems, document which colors are safe for text and which should be used only for decoration or backgrounds.
Common Mistakes to Avoid
- Assuming a beautiful palette is automatically accessible
- Testing colors as swatches instead of real text on real backgrounds
- Forgetting disabled, hover and focus states
- Using light gray text for important instructions
- Checking only desktop layouts and ignoring mobile readability
- Relying on color alone to communicate errors or status
- Using brand colors for body text without contrast testing
- Treating contrast as a final audit instead of an early design decision
Related Search Keywords
color contrast checker, wcag contrast ratio, wcag aa checker, wcag aaa checker, accessibility color contrast, contrast ratio calculator, color accessibility tool, foreground background contrast, hex color contrast, ui component contrast checker, text contrast checker, website contrast checker, accessible color checker, button contrast checker, link contrast checker
Long Tail Keywords
check color contrast online for accessibility, test wcag aa contrast ratio, foreground background color contrast checker, check button text contrast online, accessible color checker for design systems, test website text color readability, check dark mode color contrast, wcag contrast checker for UI components, find readable text color for background, test hex color pair contrast online
Search Intent Queries
how to check color contrast, wcag contrast checker online, what is a good contrast ratio, check text color accessibility, color contrast ratio calculator, wcag aa vs aaa contrast, why does color contrast fail, test button contrast online, accessible color checker, check foreground background contrast
Related Tools
Frequently Asked Questions
What does a color contrast checker do?
A color contrast checker compares a foreground color with a background color and calculates the readability ratio. It helps determine whether text or UI elements are likely to meet accessibility contrast expectations.
How do I check WCAG color contrast?
Enter the text color and background color, then review the calculated contrast ratio. Compare the result against WCAG AA or AAA targets depending on your text size and accessibility goal.
Can this help with button and icon colors?
Yes. Contrast is not only for paragraphs. Buttons, icons, input borders, focus states and other meaningful UI elements also need enough contrast to be visible.
Does a good color palette guarantee accessible contrast?
No. A palette can look visually balanced but still fail when certain colors are paired together. Always test actual foreground and background combinations.
Is WCAG AA enough for most websites?
WCAG AA is a common target for many professional accessibility workflows. AAA is stricter and may not be practical for every visual design, but it can be useful for high-readability experiences.
Why does large text have a lower contrast requirement?
Large text is generally easier to read than small text, so WCAG allows a lower contrast threshold for it. Small body text needs stronger contrast because fine details are harder to see.
When should I test color contrast?
Test contrast while choosing design tokens, building components, reviewing landing pages and before shipping UI changes. It is easier to fix colors early than after a full design system is implemented.
What should I check besides the contrast ratio?
Check hover states, disabled states, focus outlines, links, error messages and dark mode combinations. A single passing color pair does not guarantee the full interface is accessible.
Can low contrast affect users without vision disabilities?
Yes. Low contrast can be hard to read in bright sunlight, on low-quality screens or during long reading sessions. Better contrast improves usability for many users, not only accessibility compliance.
Why does my brand color fail contrast checks?
Some brand colors are too light, too saturated or too close to the background color. You may need a darker shade, lighter background or alternate accessible token for text and UI use.
Rate this tool
How was your experience? Your feedback helps us build better tools.