What does Color Contrast Checker do?
Ensure accessible color combinations for UI design.
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.
ButtonBadge
UI contrast: Pass (≥3:1)
Live preview
The quick brown fox jumps over the lazy dog.
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.