APCA
Accessible Perceptual Contrast Algorithm is the new and improved way to check perceptual contrast.
Accessible Perceptual Contrast Algorithm is the new and improved way to check perceptual contrast.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dolorem eveniet iure odio inventore delectus fuga animi? Nihil corrupti natus aut illo. Magnam exercitationem id illum consectetur? Dicta iure mollitia eveniet dignissimos nihil eligendi a autem unde, quos pariatur nesciunt voluptatibus voluptate saepe veritatis molestias numquam! Adipisci obcaecati impedit ratione.
Enter your colors Hex values to check APCA's lightness contrast value.
Note: APCA values for light text colors on a dark background color will be negative. Values further away from zero indicate better perceptual contrast, irrespective of whether the values are positive or negative.
The following value guidelines are taken directly from APCA documentation here:
These general levels are appropriate for use by themselves, without the need to reference a lookup table. APCA reports contrast as an Lc value (lightness contrast) from Lc 0 to Lc 105+. For accessibility, consider Lc 15 the point of invisibility for many users, and Lc 90 as preferred for body text.
Preferred level for fluent text and columns of body text with a font no smaller than 18px/weight 300 or 14px/weight 400 (normal), or non-body text with a font no smaller than 12px/400. Also a recommended minimum for extremely thin fonts with a minimum of 24px at weight 200. Lc 90 is a suggested maximum for very large and bold fonts (greater than 36px bold), and large areas of color. Small fonts do not have a maximum.
The minimum level for columns of body text with a font no smaller than 24px/300 weight, 18px/400, 16px/500 and 14px/700. This level may be used with non-body text with a font no smaller than 15px/400. Also, Lc 75 should be considered a minimum for larger for any larger text where readability is important.
The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read. The minimums: no smaller than 48px/200, 36px/300, 24px normal weight (400), 21px/500, 18px/600, 16px/700 (bold). These values based on the reference font Helvetica. To use these sizes as body text, add Lc 15.
The minimum for larger, heavier text (36px normal weight or 24px bold) such as headlines, and large text that should be fluently readable but is not body text. This is also the minimum for pictograms with fine details, or smaller outline icons.
The absolute minimum for any text not listed above, including text considered as “spot readable”. This includes placeholder text and disabled element text, and some non-content like a copyright bug. This is also the minimum for large/solid semantic & understandable non-text elements such as “mostly solid” icons or pictograms. Generally no less than 5.5px solid in its smallest dimension.
The absolute minimum for any non-semantic non-text that needs to be discernible, and is no less than 5px (solid) in its smallest dimension. This may include dividers, and in some cases large buttons or thick focus-visible outlines, but does not include fine details which have a higher minimum. Designers should treat anything below this level as invisible, as it will not be visible for many users. This minimum level should be avoided for any items important to the use, understanding, or interaction of the site.
These define the basic minimum levels, what you might think of as AA in the old WCAG 2. For the equivelent to AAA, simply increase the contrast values by Lc 15.
Check out the GitHub repo here to learn more.