WCAG Contrast Checker – AA & AAA Color Contrast Tool
Check foreground and background color contrast per WCAG 2.1. Supports #hex, rgb(), and hsl(). Get accessible fix suggestions, use the eyedropper, and export CSS or JSON. 100% browser-based and privacy-first.
Quick presets
One-click foreground/background pairs for common use cases.
Colors
Results
Contrast Ratio: 21.00:1
- PassAA Normal Text (4.5:1)Passes (21.00:1 ≥ 4.5:1).
- PassAA Large Text (3:1)Passes (21.00:1 ≥ 3:1). Large text is ≥18px or ≥14px bold.
- PassAAA Normal Text (7:1)Passes (21.00:1 ≥ 7:1).
- PassAAA Large Text (4.5:1)Passes (21.00:1 ≥ 4.5:1).
- PassUI Components (3:1)Passes (21.00:1 ≥ 3:1).
Color blindness simulation
Simulate how your colors may look to users with color vision deficiency. Simulation applies only to the previews below (text and UI examples), not to the actual contrast ratio.
Non-text contrast (WCAG 1.4.11)
UI components and graphical objects need at least 3:1 contrast against adjacent colors. This applies to buttons, inputs, borders, and icons.
UI contrast: Pass (≥3:1)
Live preview
Share & export
What is WCAG contrast ratio?
The WCAG contrast ratio measures the difference in perceived brightness between foreground (e.g. text) and background colors. It is expressed as a number like 4.5:1 or 7:1. Higher ratios improve readability for people with low vision or in poor lighting. WCAG 2.1 defines minimum ratios for Level AA and AAA so that content remains accessible.
AA vs AAA contrast explained
AA requires at least 4.5:1 for normal text and 3:1 for large text (or bold). AAA requires at least 7:1 for normal text and 4.5:1 for large text. Most projects aim for AA; AAA is recommended for critical or long-form content. This contrast checker shows both so you can choose the right level for your design.
How to fix low color contrast
If your foreground background contrast fails WCAG, you can: (1) Darken the text or lighten the background (or vice versa) until the ratio meets 4.5:1 or 7:1. (2) Use the suggested colors above—they pass AA with minimal visual change. (3) Increase font weight or size so the large-text threshold (3:1) applies. (4) Avoid light gray on white or dark gray on black; small adjustments often fix the issue.
Common accessibility mistakes designers make
Relying on color alone for meaning, using low-contrast body text, ignoring focus styles, and forgetting non-text contrast (buttons, inputs, borders) are common pitfalls. This tool checks both text and UI contrast so you can fix issues before launch. Always test with real users and assistive tech when possible.
Related design tools
More free design and UI tools from EverydayTools.pro:
- Color Palette GeneratorGenerate palettes from one base color with WCAG contrast.
- CSS Gradient GeneratorCreate linear and radial CSS gradients with custom stops.
- Box Shadow GeneratorBuild CSS box shadows with offset, blur, spread, and color.
- Border Radius GeneratorCustom border radius for all corners with locked controls.
Frequently Asked Questions
What is a WCAG contrast checker?
A WCAG contrast checker is a tool that measures the contrast ratio between foreground and background colors against WCAG 2.1 guidelines. It tells you whether your colors pass AA (4.5:1 for normal text) or AAA (7:1) and helps you fix failing combinations.
What contrast ratio do I need for AA vs AAA?
For Level AA: normal text needs 4.5:1, large text (or bold) needs 3:1. For Level AAA: normal text needs 7:1, large text needs 4.5:1. UI components need at least 3:1 under WCAG 1.4.11.
Does this tool support hex, RGB, and HSL?
Yes. You can enter colors as #hex (e.g. #333 or #1a1a1a), rgb(0,0,0), or hsl(0,0%,0%). All inputs are normalized to hex internally for consistent contrast calculation.
How do the fix suggestions work?
When contrast fails, the tool suggests alternative foreground or background colors that pass AA (4.5:1) with minimal visual change. It adjusts lightness in small steps and picks the closest passing colors so your design stays consistent.
Is my data sent to a server?
No. This contrast checker runs entirely in your browser. No colors or results are sent to any server, and there are no analytics or cookies. Your choices stay on your device.
What is non-text (UI) contrast?
WCAG 1.4.11 requires at least 3:1 contrast for user interface components and graphical objects (buttons, inputs, borders, icons). The tool shows a pass/fail for UI contrast and previews how your colors look on a button, input, and badge.
What does the color blindness simulation do?
The simulation shows how your foreground and background colors may look to people with protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), or achromatopsia (monochromacy). It applies only to the text and UI previews so you can check if your design still works. The contrast ratio is still calculated from your original colors.