Design tool
Color Contrast Checker
Test foreground and background colors against WCAG AA and AAA contrast requirements. Preview real text, inspect multiple color formats, and apply nearby accessible alternatives.
🔒 100% private browser processing
Your colors, text, and accessibility checks stay on your device. Xepoca does not upload or store them.
Color settings
Enter HEX, RGB, or HSL. Values are normalized to opaque HEX.
Accessible presets
Typography preview
Current classification
Normal text
AA target: 4.5:1 · AAA target: 7:1
Live preview
Original colors
Accessible color makes interfaces easier to read for more people.
Contrast ratio
17.06:1
Overall rating
AAA
Current AA
Pass
Current AAA
Pass
Foreground
- HEX
- #F8FAFC
- RGB
- rgb(248, 250, 252)
- HSL
- hsl(210, 40%, 98%)
- Luminance
- 0.9536
Background
- HEX
- #0F172A
- RGB
- rgb(15, 23, 42)
- HSL
- hsl(222, 47%, 11%)
- Luminance
- 0.0088
Accessible alternatives
Suggestions preserve the selected color's hue and saturation where possible while changing lightness enough to reach the target ratio.
Foreground · AA
#F8FAFC
17.06:1 · Already passes
Foreground · AAA
#F8FAFC
17.06:1 · Already passes
Background · AA
#0F172A
17.06:1 · Already passes
Background · AAA
#0F172A
17.06:1 · Already passes
Vision previews
Approximate simulations can reveal when meaning depends only on color.
Generated CSS
Copy the current colors and typography into your project.
:root {
--color-text: #F8FAFC;
--color-background: #0F172A;
}
.accessible-sample {
color: var(--color-text);
background-color: var(--color-background);
font-size: 20px;
font-weight: 500;
}How color contrast works
Contrast ratio compares the relative luminance of a foreground color and a background color. The result ranges from 1:1 for identical luminance to 21:1 for black against white.
WCAG contrast requirements depend on the content. Normal text has a higher threshold than large text, while meaningful interface controls and graphical objects generally need at least 3:1 against adjacent colors.
Passing a mathematical contrast check is important, but it is not the entire accessibility review. Font choice, spacing, state indicators, focus styles, and real-device testing also affect readability.
WCAG contrast targets
Normal text
Level AA requires 4.5:1. Level AAA requires 7:1 for body copy and other text that does not qualify as large.
Large text
Level AA requires 3:1 and Level AAA requires 4.5:1. Large text is at least 24px regular or approximately 18.67px bold.
UI components
Meaningful controls, focus indicators, icons, and graphical objects generally need 3:1 contrast against adjacent colors.
Color independence
Do not communicate errors, success, selection, or required fields through color alone. Add text, icons, patterns, or shape changes.
Related Xepoca tools
Color Picker & Converter →
Pick a color and convert it between HEX, RGB, and HSL.
CSS Gradient Generator →
Create gradients and verify readable text over the result.
CSS Grid Generator →
Build visual grid layouts with copy-ready HTML and CSS.
CSS Flexbox Generator →
Design flexible layouts and export CSS or Tailwind markup.
Frequently Asked Questions
What is a good contrast ratio?+
For most body text, aim for at least 4.5:1. A ratio of 7:1 reaches WCAG AAA for normal text and provides a stronger readability margin.
What counts as large text?+
Large text is at least 24px at regular weight, or approximately 18.67px when bold at weight 700 or higher.
Can I enter RGB or HSL colors?+
Yes. Enter opaque HEX, RGB, or HSL values. The checker validates the input and normalizes it to HEX.
How are accessible alternatives generated?+
The tool keeps the selected color's hue and saturation where possible, then searches for the nearest lightness that meets AA or AAA contrast.
Do the color-vision previews guarantee accessibility?+
No. They are approximate simulations for design review. Use contrast, non-color cues, keyboard testing, assistive technology, and user research together.
Are my colors or sample text uploaded?+
No. Calculations and previews happen locally in your browser. The share button stores the current settings in the URL you copy.