Verificador de contraste

WCAG (Web Content Accessibility Guidelines) is the international accessibility standard published by the W3C. Version 2.1 is referenced in most legal accessibility requirements worldwide: the EU Web Accessibility Directive, US Section 508 (federal websites), the UK Equality Act, and court interpretations of the Americans with Disabilities Act. WCAG AA compliance is the most commonly required level. Meeting WCAG is both a legal requirement in many contexts and an ethical responsibility to ensure your content is readable by users with visual impairments, color vision deficiencies, and age-related contrast sensitivity reduction.

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. Relative luminance is a perceptual measure of color brightness that weights the RGB channels by how sensitive the human eye is to each: green (72%), red (21%), blue (7%). The +0.05 offset prevents division by zero and accounts for display flare. The result ranges from 1:1 (identical colors, no contrast) to 21:1 (maximum, black on white).

WCAG defines large text as 18 point (24px at standard 96dpi screen resolution) or larger at normal weight, or 14 point (~18.67px) or larger at bold weight. Text smaller than these thresholds must meet the 4.5:1 AA requirement. In practice: most body text (14-16px regular) requires 4.5:1. Large headings (24px+ regular, or 18px+ bold) only require 3:1. This distinction gives designers more color flexibility for large display type while maintaining strict requirements for body text readability.

Contrast ratio is necessary but not sufficient for full accessibility. Passing 4.5:1 means the color combination is legible for most users with typical vision. Additional accessibility factors include: font size (minimum 16px recommended for body text), font weight (very thin fonts are hard to read even at high contrast), line spacing (1.5× line height minimum), text density, and color blindness. The contrast checker addresses luminance contrast; test with a screen reader and color blindness simulator for comprehensive accessibility review.

WCAG AA is the standard required by most legal frameworks and accessibility audits. For normal text: 4.5:1 minimum contrast. For large text: 3:1. WCAG AAA is the enhanced level representing the highest standard. For normal text: 7:1. For large text: 4.5:1. AAA compliance is not required by most legal frameworks but is the target for content that must be accessible to users with severe visual impairments. Many organizations aim for AA on all content and AAA on content critical for users with disabilities, such as essential instructions or medical information.

The WCAG specification addresses only uniform backgrounds. For text on images or gradients, the contrast varies across the text area. Best practices: use a semi-transparent dark or light overlay between the image/gradient and the text to ensure minimum contrast everywhere, or sample the darkest/lightest background area and test that worst-case scenario. WCAG 2.2 (in development) may address this more explicitly. For critical text on complex backgrounds, always visually verify readability at small sizes and on mobile devices in addition to running the numeric check.

WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires a 3:1 contrast ratio for UI components and graphical objects that convey information — including form input borders, focus indicators, chart lines, icons, and button outlines. This is separate from the text contrast requirements. For example, a text input field's border must have 3:1 contrast against the background to be distinguishable. An icon that conveys meaning (not purely decorative) must also meet 3:1. The Contrast Checker's "UI components" threshold displays whether your color combination meets this requirement.