Color Contrast Checker — WCAG AA & AAA Pass/Fail for Any Color Pair
Check accessibility contrast for normal text, large text, and UI components
Accessible color contrast is not optional — WCAG 2.1 AA compliance is a legal requirement in many jurisdictions and a baseline expectation for any professional web product. This contrast checker calculates the exact contrast ratio between any two hex colors and immediately shows whether the pair passes or fails across all five WCAG 2.1 levels: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), AAA large text (4.5:1), and UI components (3:1). If the pair fails, the tool suggests the nearest color adjustment that achieves the required ratio and lets you apply it in one click. Use this during design, code review, or accessibility audit to catch contrast failures before they reach production.
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
Exact WCAG 2.1 contrast ratio calculation
Pass/fail for all 5 WCAG levels: AA/AAA normal, AA/AAA large text, UI components
Color pickers and direct hex input
Nearest passing color suggestion with one-click apply
Live preview swatch showing text on background
Color pairs saved in URL for easy sharing
No account or install required
Runs entirely in your browser
Related Tools
Frequently Asked Questions
What is the minimum contrast ratio for WCAG AA compliance?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt regular or 14pt bold) and at least 3:1 for large text (18pt regular or 14pt bold and above). UI components such as input borders and icons also need at least 3:1. Most legal accessibility requirements reference WCAG AA as the minimum standard.
How is the WCAG contrast ratio calculated?
The contrast ratio is calculated using relative luminance. Each RGB color component is linearized using a gamma correction formula, then combined with the weights 0.2126 for red, 0.7152 for green, and 0.0722 for blue to get luminance. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance and L2 is the darker one.
What counts as large text for WCAG purposes?
WCAG defines large text as at least 18 points (24px) in regular weight or at least 14 points (approximately 18.67px) in bold weight. Text at these sizes gets a lower contrast requirement (3:1 for AA) because it is more readable at lower contrast than small text.
Does WCAG contrast apply to decorative images?
No. WCAG contrast requirements apply to text and to UI components that convey information (such as a border on a text input that indicates it is interactive). Decorative images and background textures that do not convey information are exempt from contrast requirements.
Why is contrast important for accessibility?
Low contrast between text and background makes content difficult or impossible to read for users with low vision, color blindness, or who are reading in bright sunlight. High contrast ensures content is legible across a wide range of visual abilities and environmental conditions. It is one of the highest-impact, lowest-effort accessibility improvements available.