Convert hex to RGB/HSL/HSV and check WCAG AA and AAA contrast ratios.
Check if two colours meet accessibility requirements for text on backgrounds.
Aa Heading text
Body text looks like this in your chosen colours.
Small text (12px equivalent)
Normal text
< 18pt or 14pt bold
Pass AA
Normal text
< 18pt or 14pt bold
Pass AAA
Large text
≥ 18pt or 14pt bold
Pass AA
Large text
≥ 18pt or 14pt bold
Pass AAA
UI components
Icons, borders
Pass AA
WCAG contrast is the ratio between the luminance of a foreground colour and its background. A ratio of 1:1 means no contrast at all. A ratio of 21:1 is the maximum possible (black text on white). The WCAG guidelines set minimum ratios that ensure text is readable for people with visual impairments, including colour blindness and low vision.
AA and AAA are the two compliance levels. AA is the standard requirement in most legal frameworks, including the European Accessibility Act and section 508 in the US. AAA is the stricter target for audiences with more severe visual conditions.
| Content type | AA minimum | AAA minimum |
|---|---|---|
| Normal text (below 18pt, or below 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt or above, or 14pt bold) | 3:1 | 4.5:1 |
| UI components and icons | 3:1 | Not specified |
| Decorative or inactive elements | None required | None required |
Web developers verifying their UI meets legal accessibility requirements. Designers checking that text overlaid on brand photography is readable before a campaign goes out. Marketing managers working with clients whose brand guidelines specify accessibility compliance. If your organisation has a design system, running contrast checks on every colour pairing before they go into the system prevents problems downstream.
Two things. The colour converter takes any hex, RGB, or HSL input and shows the equivalent in every other format. The contrast checker takes two colours and calculates the WCAG contrast ratio between them, then shows whether they pass AA and AAA thresholds for normal text, large text, and UI components.
Free, with no account and no usage limits. All calculations happen in your browser.
WCAG stands for Web Content Accessibility Guidelines, published by the W3C. They define minimum contrast ratios to ensure text is readable for people with visual impairments. The guidelines are widely adopted by governments, enterprises, and design systems as a baseline for accessible design.
AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the standard legal requirement in most jurisdictions. AAA is the higher target for audiences with severe visual impairments.
Text overlaid on photos in social media creatives often fails contrast requirements without the designer realising. Low-contrast text is harder to read on mobile screens in outdoor light, and many platforms display content to users who have increased contrast accessibility settings enabled. Running a contrast check before finalising a template catches these issues early.