Use this color contrast checker to test WCAG contrast ratios for foreground and background colors with a live preview.
Color Inputs
Enter two hex colors or choose a ready-made scheme to test the pairing in context.
Text Color
Background
Scheme preview
Live Preview
Preview the selected colors on text, labels, and a button-like surface. Changes should be obvious here immediately.
This preview simulates paragraph text at normal reading size so you can judge the color pair in a more realistic context.
Presets
Color schemes
Contrast
9.58:1 contrast ratio
AA normal
pass
AA large
pass
AAA normal
pass
AAA large
pass
Report
Copy or download the exact ratio and pass/fail summary.
Text color: #F5F5F5 Background: #3F3F46 Contrast ratio: 9.58:1 AA normal text: pass AA large text: pass AAA normal text: pass AAA large text: pass
How To Use
Enter a foreground and background hex color, then inspect the ratio and the pass/fail status for WCAG levels.
AA normal is the usual minimum target for body text. Use the live preview to judge readability beyond the raw ratio when you are checking color contrast for real UI text.