Base settings
Define your palette
Color Cards | WCAG Level AA
Export & Import
Variables
CSS Variables
:root {
--dark-blue: #000033;
--white: #FFFFFF;
--light-pink: #FFBBEE;
--dark-pink: #CC0088;
}JSON
{
"darkBlue": "#000033",
"white": "#FFFFFF",
"lightPink": "#FFBBEE",
"darkPink": "#CC0088"
}What’s This All About?
This tool helps you evaluate the contrast between colors in your palette, ensuring accessibility and readability. Take your corporate design colors, add them to the tool, and instantly see which combinations meet accessibility standards. It can also be useful when creating a new palette, helping you choose colors that work well together while remaining accessible.
What is Shown in the Cards?
Each color card represents a selected color from your palette, showing how well it contrasts with the other colors. On the left, you see the name of the compared color, and on the right, the calculated contrast value. Colors are categorized based on accessibility standards: those suitable for body text (smaller than 24px) and those that require larger text for sufficient readability. A higher contrast value means better readability, while lower values may not meet accessibility guidelines. More on color contrasts.
By default, colors that do not meet the minimum contrast requirements are hidden from the cards. This means some cards may appear empty if none of the other colors provide sufficient contrast. If you want to see all comparisons, including those that fail the contrast test, you can enable the “Show all Colors” option.
What is APCA Contrast?
By default, this tool evaluates contrast using the WCAG 2.1 standards, which are widely used for accessibility compliance. However, APCA (Advanced Perceptual Contrast Algorithm) is a newer, more advanced contrast model designed to improve readability evaluation. While not yet an official standard, APCA considers how human vision perceives contrast and factors in which color is used for text. Unlike WCAG, APCA contrast values range from 0 to approximately 106, representing Lightness Contrast (Lc), with higher absolute values indicating better readability. Additionally, APCA is polarity-sensitive, meaning the contrast result changes depending on whether a color is used as text or background.
What Do the Contrast Values Mean?
The contrast values in this tool (displayed on the right side of each card) are based on the WCAG 2.1 AA standard, which defines accessibility requirements for text readability. To meet these guidelines, body text requires a minimum contrast of 4.5:1, while large text and icons only need 3:1.
When using APCA mode, the contrast calculations work differently. APCA doesn’t use fixed contrast ratios but instead provides a score ranging from 0 to approximately 106. In this tool, a contrast value of 60+ is required for large text, while 75+ is needed for body copy. These thresholds are not yet an official standard, but they align with early discussions on APCA’s "Bronze" conformance level.
Why Should I Consider Using Both?
While I believe that APCA is closer to how humans actually perceive color contrast, it is still not an official standard. Many accessibility tools and regulations still rely on WCAG 2.1 for compliance, making it necessary to consider both approaches.
A contrast value that technically passes WCAG can still be difficult to read. For example, take a look at this example. According to WCAG, it is acceptable to use black or even dark gray on orange, even though these combinations may not be very readable in practice.
APCA considers large white text on orange to be the better option, and I personally find it more readable as well. However, since white text fails the WCAG contrast requirements, it wouldn’t pass automated accessibility checks. By enabling both WCAG and APCA, you get the best of both worlds—APCA helps ensure better real-world readability, while WCAG compliance ensures your site meets formal accessibility standards.