Color Contrast Checker
Online color contrast checker with real-time foreground and background ratio calculation, WCAG AA/AAA validation, and palette suggestions for accessible web design and UI review
Foreground (Text)
Common colors
Background
Common colors
Live Preview
Sample Heading
This sample paragraph helps you review readability for regular text under the current color combination.
Link text preview
Contrast ratio
WCAG AA
WCAG AAA
Color Adjustment Suggestions
Click any suggestion to apply it as foreground color.
Lighter foreground
Darker foreground
Recommended Color Pairs
Color Contrast Guide
Color contrast strongly affects readability and accessibility. This tool helps you validate combinations early in design and development to reduce review and release risks.
What is color contrast
Color contrast measures brightness difference between foreground content and its background, expressed as x:1. Higher ratios usually mean clearer reading in more environments.
WCAG requirements
WCAG AA level
- Normal text needs at least 4.5:1.
- Large text (18pt or 14pt bold) needs at least 3:1.
- AA fits most production web and app interfaces.
WCAG AAA level
- Normal text needs at least 7:1.
- Large text needs at least 4.5:1.
- AAA is ideal for strict readability targets.
Contrast formula
Contrast is calculated from relative luminance values, where L1 is the lighter color and L2 is the darker color. Luminance values range from 0 to 1.
Best practices
- Keep body text at least at AA level.
- Do not rely on color alone for critical meaning.
- Test combinations on both light and dark surfaces.
- Include contrast checks in design review and release QA.
Use cases
- Accessibility updates for websites and admin systems.
- Brand palette and design guideline validation.
- Readability review for buttons, tags, and form controls.
- Final checks for campaign pages and visual assets.
Privacy
All calculations run locally in your browser. No color data or design content is uploaded.