Contrast Checker
Measure the WCAG contrast ratio between any text and background color.
#163243 #ffffff About This Tool
The Contrast Checker calculates the precise WCAG (Web Content Accessibility Guidelines) contrast ratio between any two colors. It instantly tells you whether your text-to-background combination meets AA, AA Large, or AAA compliance standards, making it indispensable for web designers, content creators, and accessibility auditors.
Color contrast is measured mathematically using relative luminance — a formula that accounts for how the human eye perceives different wavelengths of light. The ratio ranges from 1:1 (no contrast, e.g., black on black) to 21:1 (maximum contrast, e.g., black on white). WCAG defines specific thresholds to ensure readability for users with low vision and color deficiencies.
Tool Guide
Pick your text color
Click the Text color swatch and choose any color using the native color picker. The hex code is displayed below.
Pick your background color
Click the Background swatch and choose the background color. You'll see a live preview immediately.
Read the ratio
The contrast ratio updates in real time. The verdict badge shows Excellent, Good, AA Large only, or Poor.
Check WCAG levels
The three result cells show pass/fail for AA Normal (4.5:1), AA Large (3:1), and AAA Normal (7:1) standards.
How to Use
- AA Normal (4.5:1): Required for body text smaller than 18pt (or 14pt bold). This is the minimum standard for most web content.
- AA Large (3:1): Required for text 18pt+ (or 14pt+ bold). Large text has wider strokes, so lower contrast is acceptable.
- AAA Normal (7:1): The strictest level. Recommended for content targeting users with severe low vision or reading difficulties.
- Non-text elements: UI components (buttons, form borders) and graphical objects also need at least 3:1 contrast against adjacent colors.
- Testing tip: Test your brand colors early in the design process. Fixing contrast issues after launch is far more costly than designing with contrast in mind from the start.
Frequently Asked Questions
What is WCAG?
WCAG stands for Web Content Accessibility Guidelines, developed by the W3C. It defines international standards for making web content accessible to people with disabilities. The current versions are WCAG 2.1 and WCAG 2.2.
Why is pure black on white not always recommended?
While pure black (#000000) on white (#FFFFFF) gives the maximum 21:1 ratio, prolonged reading on high-luminance screens can cause ocular fatigue and halation effects for users with astigmatism. Dark charcoal gray (#121212) on soft off-white (#F5F5F5) maintains high compliance while easing visual strain.
What does "large text" mean?
WCAG defines large text as 18pt (24px) regular or 14pt (18.66px) bold. Large text has a lower contrast threshold (3:1) because thicker strokes are easier to perceive at lower contrast.
Does this tool check color contrast for color-blind users?
This tool checks luminance contrast, which affects readability for all users including those with low vision. Color blindness affects hue discrimination, not luminance. However, good luminance contrast also benefits color-blind users. For hue-specific testing, use the Color Vision Simulator tool.
What ratio should I target for my website?
For most public websites, aim for at least AA compliance (4.5:1 for normal text, 3:1 for large text). If your audience includes elderly users or people with significant low vision, consider targeting AAA (7:1). Government and healthcare sites are often required to meet at least AA.
Are gradients and background images supported?
This tool works with solid colors only. For gradient or image backgrounds, you should test the worst-case scenario — the area of lowest contrast. In practice, ensure all text remains readable across the entire background.