AfroTools / Tools / Color Contrast

WCAG Contrast Checker

Test color combinations for WCAG 2.1 accessibility compliance. Check AA and AAA contrast ratios for normal and large text instantly.

WCAG 2.1AA & AAAPreview hai
Contrast Checker
Normal text looks like this (16px)
Large text looks like this (24px)
21:1
Contrast Ratio
PASS
AA Normal
PASS
AA Large
PASS
AAA Normal
PASS
AAA Large
About WCAG Contrast

Understanding WCAG Color Contrast

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable by people with visual impairments. The contrast ratio ranges from 1:1 (no contrast, e.g., white on white) to 21:1 (maximum contrast, black on white).

WCAG Levels

  • AA Normal Maandishi: Minimum 4.5:1 contrast ratio
  • AA Large Maandishi: Minimum 3:1 contrast ratio
  • AAA Normal Maandishi: Minimum 7:1 contrast ratio
  • AAA Large Maandishi: Minimum 4.5:1 contrast ratio

Large text is 18pt (24px) or larger regular weight, or 14pt (18.66px) bold. Most legal requirements ask for AA compliance at minimum. The formula uses relative luminance as defined in the WCAG 2.1 guidelines.

For related tools: Color Picker and Ukaguzi Contrast.

Ukaguzi Contrast kwa Kiswahili. Pima contrast ya rangi kwa UI na content. Matokeo ni msaada wa accessibility review, si audit kamili ya WCAG. Kwa security, API, hosting, SEO, PWA, USSD au domain decisions, hakiki source output, provider docs na production environment kabla ya launch.

This colour contrast checker helps designers and developers verify that their text and background colour combinations meet WCAG 2.1 accessibility guidelines. Simply enter or pick your foreground and background colours and the tool instantly calculates the contrast ratio, showing whether your combination passes AA and AAA standards for both normal and large text. Accessible design is not just good practice, it is a legal requirement in many countries. Whether you are building a website, designing a mobile app, or creating marketing materials, this tool ensures your content is readable by everyone, including people with visual impairments or colour blindness.

Maswali ya mara kwa mara

What is WCAG contrast ratio?
WCAG defines minimum contrast between text and background. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
What counts as large text?
18pt (24px) or larger regular weight, or 14pt (18.66px) bold weight.
Why does contrast matter?
Good contrast ensures readability for people with visual impairments, color blindness, or those in bright environments. It is a legal requirement in many jurisdictions.