WCAG (Web Content Accessibility Guidelines) color contrast requirements ensure that text is readable for people with visual impairments, including low vision, color blindness, and older users. The guidelines specify minimum contrast ratios between text (foreground) and background colors. Meeting these standards makes your content accessible to a wider audience and is often required by law (ADA, Section 508, EN 301 549). The contrast ratio ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).

AA Level (Minimum): Normal text requires a contrast ratio of at least 4.5:1, while large text (18px+ bold or 24px+ regular) needs 3:1. This is the widely accepted minimum standard for web accessibility.

AAA Level (Enhanced): Normal text requires 7:1 contrast, and large text needs 4.5:1. AAA is the highest accessibility standard but can be difficult to achieve with many brand colors. Most organizations aim for AA compliance.

The WCAG 2.1 formula uses relative luminance of each color. First, each RGB channel (0-255) is linearized using gamma correction. Then the relative luminance is calculated as: L = 0.2126×R + 0.7152×G + 0.0722×B. Finally, the contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker. This formula accounts for human perception — green contributes most to perceived brightness, blue the least.

WCAG defines large text as: 18px or larger AND bold, OR 24px or larger (any weight). At typical 96dpi, 18px ≈ 14pt and 24px ≈ 18pt. Large text has lower contrast requirements because larger characters are inherently easier to read. When designing for accessibility, consider using larger text sizes when your brand colors can't meet the 4.5:1 ratio for normal text.

Several strategies can help:
• Darken the text or lighten the background incrementally
• Use a slightly darker shade of your brand color for text on white
• Increase font size to qualify for the lower large-text threshold
• Add a subtle background tint behind text to boost contrast
• Consider increasing font weight (medium/semibold instead of regular)
• For critical UI elements, use pure black (#000) or pure white (#FFF) as one of the colors

Yes. WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires UI components (buttons, form borders, input fields) and graphical objects to have a contrast ratio of at least 3:1 against adjacent colors. This includes focus indicators, checkbox borders, and icon strokes. However, decorative elements that convey no information are exempt. Always check interactive element boundaries for sufficient contrast.

The theoretical maximum is 21:1, achieved only with pure black (#000000) on pure white (#FFFFFF) or vice versa. Any other color combination will yield a lower ratio. For reference, the contrast ratio of #333 on #FFF is approximately 12.6:1, which comfortably passes both AA and AAA. Even very dark grays like #222 produce ratios around 15-16:1 against white.