How to use the Color Contrast Checker
- 1. Enter the coloursType or pick the text colour and the background, in hex, rgb(), hsl() or by name.
- 2. Check the previewSee large text, normal text and a button in your colours as you type.
- 3. Check contrastGet each WCAG result and, if needed, the nearest colours that pass AA and AAA.
What WCAG asks for
The Web Content Accessibility Guidelines measure contrast as a ratio between the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white). Level AA, the usual legal and industry target, needs 4.5:1 for normal text and 3:1 for large text (at least 24px, or about 18.7px bold) and for icons, borders and other UI parts. Level AAA needs 7:1 and 4.5:1. Ratios are shown rounded down, because a colour pair at 4.49:1 does not pass 4.5:1. Everything runs in your browser; nothing you type or choose is uploaded.
When a pair fails, the tool searches along the same hue and saturation for the closest lighter or darker text colour that passes, so your colour keeps its character. Semi-transparent colours are blended with the background first, which is how browsers show them.
Worked example
Uncodemy orange #ff5421 on white has a ratio of 3.20:1. It passes AA for large text and UI parts (3:1) but fails AA for normal text (4.5:1) and both AAA levels. The tool suggests #e03400 (4.50:1) as the closest orange for AA body text and #aa2700 (7.00:1) for AAA. Navy #0b1f4b on white reaches 16.00:1 and passes everything.
Beyond the ratio
- Thin or small fonts need more contrast than the minimum to stay comfortable.
- Text over photos needs a solid or darkened backdrop; check the darkest and lightest parts.
- The ratio uses the WCAG 2.2 formula. The proposed APCA method in future guidelines scores differently.
Frequently asked questions
Is AA enough?
AA is what most accessibility laws and audits require. Aim for AAA on long reading text when your design allows.
Does contrast matter for placeholders and disabled buttons?
Placeholder text should meet 4.5:1 if it carries information. Disabled controls are exempt, but should still be noticeable.
Is the colour contrast checker free?
Yes. You can open the colour contrast checker and fill in every option without signing up. When you check contrast for the first time, we ask once for your name and WhatsApp number; after that it, and every other Uncodemy tool, opens straight away.