Check WCAG 2 and APCA contrast between colors in HEX, RGB, HSL, LCH and OKLCH.
Helping 30,000+ world’s greatest designers create beautiful designs.
Atmos’s toolbox
Atmos is a toolbox specialized for creating UI palettes. From finding colors, through generating shades, to fine-tuning your palette we've got you covered.
Color contrast is the difference in lightness between a foreground color (typically text) and its background. High contrast makes text easier to read and UI elements easier to distinguish, especially for users with low vision or color blindness. Contrast is measured as a ratio, the higher the ratio, the greater the visual difference. A ratio of 1:1 means the colors are identical; 21:1 is the maximum contrast between pure black and pure white.
WCAG (Web Content Accessibility Guidelines) defines contrast requirements for web content. For normal text, WCAG AA requires a minimum contrast ratio of 4.5:1, and WCAG AAA requires 7:1. For large text (18pt or 14pt bold and above), the thresholds are lower: 3:1 for AA and 4.5:1 for AAA. These ratios apply to text against its background and to UI components like buttons and form inputs against their surroundings.
APCA (Advanced Perceptual Contrast Algorithm) is a newer contrast model developed for WCAG 3. Unlike WCAG 2, which uses a single ratio for all situations, APCA accounts for font size, font weight, and the specific use case (body text vs. large headings vs. non-text elements). APCA scores range from 0 to 106 and are directional, the foreground and background order matters. It tends to produce more accurate predictions of real-world readability than the older WCAG 2 formula.
The Atmos contrast checker accepts HEX, RGB, HSL, LCH, and OKLCH color values. You can mix and match formats, for example, checking a HEX foreground against an OKLCH background. This makes it easy to check contrast across the color formats you already use in your codebase or design tool without converting values first.
Low contrast text is one of the most common accessibility barriers on the web. Users with low vision, color blindness, or age-related vision changes rely on sufficient contrast to read content. Poor contrast also hurts usability in bright sunlight or on low-quality screens. Meeting WCAG contrast requirements is a legal requirement in many jurisdictions and is a baseline expectation for any professionally built product. Beyond compliance, good contrast simply makes interfaces easier for everyone to use.