WCAG Contrast Checker

How to use the WCAG Contrast Checker

Color contrast — the math behind accessibility

10 Things to Know About WCAG Contrast

Frequently Asked Questions

• What's the difference between AA and AAA?+

  AA is the standard level — required by most accessibility laws (EU EN 301 549, US Section 508, UK Equality Act). AAA is the enhanced level — aspirational, often required for government / banking / healthcare / education services. For body text: AA = 4.5:1, AAA = 7:1. For large text: AA = 3:1, AAA = 4.5:1. AAA is harder to achieve while still allowing creative design choices, so it's often not feasible for marketing-heavy sites. Aim for AA as a baseline; AAA for accessibility-critical content (legal text, error messages, primary navigation, body content).

• What counts as "large text" for WCAG?+

  Per WCAG 2.1, "large text" is precisely defined as: 18 point (24px) or larger at regular font weight, OR 14 point (18.66px) or larger at bold weight (700+). The 3:1 contrast relaxation only applies to text meeting these exact specifications. Headings styled large but rendered at 22px don't qualify for the relaxation. When in doubt, target AA Normal (4.5:1) for all text — it's safer and matches actual rendering more reliably.

• Why 4.5:1 specifically?+

  It's the threshold below which users with 20/40 vision (most adults over 50, plus many younger people with uncorrected vision issues) struggle to read. Below 4.5:1, reading speed drops measurably and error rates increase. 4.5:1 was chosen by WCAG working group based on extensive empirical research with low-vision users. The number isn't arbitrary — it's calibrated against actual reading performance. Higher (7:1 AAA) supports 20/80 vision; lower fails for too many users to be acceptable.

• Does this apply to icons, logos, charts?+

  UI components (buttons, form fields, focusable controls, icons that convey information) need 3:1 contrast against adjacent colors (WCAG 1.4.11). Logos and decorative imagery are EXEMPT from contrast requirements per WCAG. Charts and data visualisations need to convey information through more than just color — patterns, labels, or direct annotation work alongside color. For data points in charts, AAA-style 7:1 is best for accessibility-critical visualisations (medical, financial). The contrast checker is for any two-color comparison; apply WCAG semantics yourself based on what the colors represent.

• How is WCAG contrast different from APCA?+

  WCAG 2.1's contrast ratio is the current standard (since 1998 origins) — uses relative luminance + ratio formula. APCA (Advanced Perceptual Contrast Algorithm) is a newer approach being developed for WCAG 3.0 — uses a different "Lc" (Contrast Lightness) metric that better accounts for human perception, especially at extreme dark backgrounds. Most current accessibility regulations require WCAG 2.x compliance (ratio-based). APCA is more accurate but not yet legally required anywhere. Use WCAG ratios for compliance; APCA is an additional tool for design refinement.

• What if my brand colors don't meet AA?+

  Common problem — brand color decks often have insufficient contrast. Solutions: (1) Darken the brand color for text use, lighter version for decorative use. (2) Use brand colors only for accents, with high-contrast neutrals for body text. (3) Pair brand color with white or black depending on luminance — typically dark brand colors get white text, light brand colors get dark text. (4) Reserve low-contrast brand combos for headings only (where AA Large 3:1 applies). Many large brands maintain "primary" and "accessible" variants of each brand color for different uses.

• Should I rely only on the contrast ratio?+

  No. Contrast is necessary but not sufficient. Also check: Color vision deficiency: 4-8% of men can't reliably distinguish red from green; use the colorblindness simulator alongside this. Reading complexity: jargon-heavy text needs higher contrast than casual content. Cognitive load: motion, distractions, multiple colors compound. Real-user testing: contrast checking is automated; actual users with disabilities will surface issues no tool catches. WCAG compliance is a baseline, not a ceiling.

• What about contrast on images, videos, gradients?+

  Text over images / videos / gradients is tricky — the background luminance varies. Two strategies: (1) Add a semi-transparent overlay (dark or light) between the image and text to ensure consistent contrast. (2) Use a solid-color text container or text-shadow technique. For gradients, test against the LIGHTEST point of the gradient (the worst case for dark text). WCAG technically requires the text to maintain 4.5:1 against ANY part of the background — not just the average. Static screenshots of your design with the live text overlaid let you sample contrast at different background regions.

• Are my color values stored anywhere?+

  No. All calculations run entirely in your browser via JavaScript. There's no server roundtrip — open DevTools → Network and confirm zero outbound requests. Your color values stay on your device. Safe for confidential brand work, unannounced design systems, or any UI work that shouldn't leave your machine.

• Is accessibility legally required in ASEAN?+

  Varies. Singapore: government services follow WCAG 2.1 AA per Digital Service Standards; private sector increasingly aligned via IMDA Digital Readiness Blueprint + Tripartite Guidelines on Workplace Accessibility. Malaysia: WCAG AA referenced in MyDigital + Persons with Disabilities Act 2008. Philippines: Magna Carta for Disabled Persons (RA 7277) covers accessibility broadly. Indonesia/Thailand/Vietnam: emerging requirements, less strictly enforced. EU's European Accessibility Act (effective June 2025) makes WCAG 2.1 AA mandatory for EU consumer services — ASEAN companies serving EU customers must comply. Best practice: target WCAG 2.1 AA across all consumer-facing services regardless of jurisdiction; it's both ethically right and legally future-proof.

Related Tools