adobe / leonardo

Generate colors based on a desired contrast ratio

Home Page:http://www.leonardocolor.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

WCAG 3 APCA Lc contrast calculations

Camulos opened this issue · comments

Description

As the method of calculating contrast that is referenced in WCAG 2 has shown to not be very good at telling us contrast information that would be real world applicable, it would be helpful to get APCA Lc calculations included in the same tools.

Why do you need this feature?

My organisations need to (legally) follow the guidelines in WCAG 2.x, but we would also like to have contrasts that are actually readable. We would like to also see APCA-calculations, as it is likely that WCAG 3 will in 3-4 years be the legally required standard. We also know that (even if the algorithm is in beta) APCA-calculations is probably the best option we have to try to to make colour combinations that do not exclude.

Additional context

  • Nice to have the option to decide what font size and weight the foreground colours should be calculated for, and make 16px 400/normal be the default.
  • Nice to have the contrast calculation in a colour-system grid, pairing all colours in a system against each other

APCA is already a supported method of contrast generation in Leonardo. In the UI you can access this option in the Theme Settings menu.
image

In the Leonardo JavaScript module, you can define or set the method using the formula argument, which is 'wcag2' by default. Set to 'wcag3' for the APCA formula. See the Paramus/setter in theme.JS here https://github.com/adobe/leonardo/blob/main/packages/contrast-colors/theme.mjs

Note: this apparently was not documented in the Readme when the API was added in for APCA. I will log a different issue to resolve that.