--- title: "Color Contrast Checker - WCAG AA & AAA | CanDoYa" description: "Free WCAG color contrast checker. Enter a text and background color to get the contrast ratio and instant AA & AAA pass/fail for normal and large text." url: https://candoya.com/tools/color-contrast-checker/ locale: en type: browser-tool --- # Color Contrast Checker Category: Color & Design ## What is a color contrast checker? A color contrast checker measures the contrast ratio between a text color and its background and tells you whether it meets WCAG accessibility standards. It returns a ratio from 1:1 to 21:1, then shows pass or fail for AA and AAA at both normal and large text sizes. The checker uses the official WCAG relative-luminance formula, so its numbers match the WebAIM checker and most accessibility audits. Everything runs in your browser - your colors are never uploaded, and there are no limits. ## How to use it 1. **Enter your colors** - Type a hex code, rgb() value or CSS color name for the text and background, or pick them with the color swatches. 2. **Read the ratio** - The contrast ratio updates live, with a preview of your text on its background. 3. **Check the badges** - Each badge shows pass or fail for WCAG AA and AAA at normal and large text sizes. ## Who it's for - **Designers** testing brand colors before they reach development. - **Front-end developers** checking button, link and label colors against WCAG AA. - **Accessibility auditors** documenting contrast failures with exact ratios. - **Content and email teams** confirming text stays readable on colored backgrounds. ## Expert note This tool truncates the ratio rather than rounding up (the WebAIM convention), so small differences matter: #767676 on white is 4.54:1 and passes AA, but #777777 is 4.47:1 and fails - even though the two grays look nearly identical. Always check the exact figure, not a rounded one. ## Frequently asked questions ### Is the color contrast checker free? Yes - it's 100% free with no sign-up and no limits. It runs entirely in your browser. ### What contrast ratio do I need for WCAG AA? WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA raises that to 7:1 for normal text and 4.5:1 for large text. ### What counts as large text? Large text is at least 18pt (about 24px) at a regular weight, or 14pt (about 18.66px) when bold. Large text is allowed a lower contrast ratio because bigger glyphs are easier to read. ### How is the contrast ratio calculated? It's (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors. Luminance is computed from the sRGB red, green and blue channels per the WCAG 2.x definition. ### Does it support hex, RGB and color names? Yes. You can enter 3-, 4-, 6- or 8-digit hex, rgb() and rgba() values, or any CSS color name such as 'teal'. You can also pick colors with the native color swatch. ### Why does the same ratio sometimes pass and sometimes fail? The required ratio depends on text size and the level you target. A 3.5:1 ratio fails AA for normal text but passes AA for large text, so always check against the size and level you actually use. ## Related tools - [Color Picker](https://candoya.com/tools/color-picker/) - [HEX to RGB Converter](https://candoya.com/tools/hex-to-rgb/) - [RGB to HEX Converter](https://candoya.com/tools/rgb-to-hex/) - [HEX to HSL Converter](https://candoya.com/tools/hex-to-hsl/) - [Color Palette Generator](https://candoya.com/tools/color-palette-generator/) --- *Markdown edition of , published for AI agents and other automated readers. Index of key pages: .*