Color Contrast Checker
Check foreground/background contrast against WCAG AA and AAA. See the ratio update as you pick colors.
Color Contrast Checker
Live17.85:1
Contrast ratio
Readable headline sample
Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.
Small caption text for density checks.
CSS output
color: #0f172a; background-color: #ffffff; /* contrast ratio: 17.85:1 */
Key capabilities
- Check foreground/background contrast against WCAG AA and AAA guidelines.
- Runs in your browser
- Free to use
How to use
- Pick text (foreground) and background colors.
- Read the contrast ratio and AA/AAA results.
- Adjust until you pass your target level.
How this tool works
- Pick text (foreground) and background colors.
- Read the contrast ratio and AA/AAA results.
- Adjust until you pass your target level.
Recommended settings
- Use the default options first, then adjust if needed
Supported formats
Text / on-page input
File size and limits
- Very complex multi-layer previews may feel slower on older phones.
Privacy
Color & CSS generators run entirely in your browser. Previews and conversions never upload your styles.
Common use cases
- Use Color Contrast Checker whenever you need: Check foreground/background contrast against WCAG AA and AAA guidelines.
Troubleshooting
Preview looks different after paste
Check for competing CSS on your page (resets, inherited colors). Copy the generated rule into an isolated stylesheet first.
FAQ
Does this upload my CSS?
No. Generators and converters run in your browser with live preview.
Do I need an account?
No. Open the tool, tweak controls, and copy the CSS.
Related tools
HEX ↔ RGB ↔ HSL Converter
Convert colors between HEX, RGB, and HSL instantly with a live swatch.
Open toolText Shadow Generator
Craft readable text-shadow styles with live typography preview.
Open toolCSS Gradient Generator
Build linear, radial, and conic gradients with live preview and copy-ready CSS.
Open tool