Check colour contrast
Check text and background colour contrast against WCAG AA and AAA with a live preview and suggested fixes for failing pairs. Free and private.
- Files never leave your device
- Free, no sign-up
- No watermark
About Color Contrast Checker
Make sure people can actually read your text. Pick a text colour and a background colour to see the contrast ratio and whether it passes WCAG AA and AAA for normal and large text. If a pair fails, the tool suggests a nearby colour that passes, so you can fix it in one click. Good contrast helps everyone, including people with low vision and anyone reading in bright sunlight.
How to use Color Contrast Checker
- 1
Pick a text colour and a background colour.
- 2
Read the contrast ratio and WCAG results.
- 3
Swap colours to test the reverse.
- 4
Click a suggested colour to fix a failing pair.
Why use this tool
- Contrast ratio with WCAG AA and AAA results.
- Separate checks for normal and large text.
- Automatic fix suggestions.
- Live text preview.
- Swap colours in one click.
Frequently asked questions
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1.
Roughly 24px regular or 18.5px bold and above.
Accessibility is part of a good page experience, and readable pages keep visitors on the page longer.
Yes. Paste your brand HEX values to see which combinations are safe for text.
No. Everything is processed in your browser tab. Nothing you type or paste is sent to CodeMites or any other server.
Yes. There is no account, no watermark and no usage limit. The tool runs in your own browser, so there is no server cost to charge you for.
Yes. It runs in any modern browser on Android and iOS as well as on Windows, macOS and Linux, with nothing to install.
Yes. The Color Contrast Checker gives you plain CSS, so it works in stylesheets, CSS modules, styled-components or inline styles in any framework.
Yes. Anything you create with this tool is yours to use in personal and commercial work, with no attribution required.
Related tools
All CSS & Design tools →- Color ConverterConvert colours between HEX, RGB and HSL in real time.
- Color Palette GeneratorGenerate harmonious colour palettes from one base colour: complementary, analogous, triadic and more, with shades and CSS variables.
- Text Shadow GeneratorCreate CSS text-shadow effects such as glow, outline and 3D with up to five layers and presets.
- CSS Gradient GeneratorCreate linear and radial CSS gradients visually: pick colours, add stops, set the angle and copy the code.
- Box Shadow GeneratorDesign CSS box shadows visually with offsets, blur, spread, colour and multiple layers, then copy the code.
- Border Radius GeneratorDesign rounded corners visually: set each corner separately, link them, choose px, % or rem, preview the shape and copy the CSS.