Suggest colour that meetsContrastGuidelines for WCAG AA
joaoviana opened this issue · comments
The project that I am currently working on has been incredibly challenging in terms of understanding main concepts of colour theory and how this library helps the team in developing with accessibility in mind - not as a feature.
Current Scenario
Our users have the ability to set a preferred colour that can be added to a few text elements (such as links) and buttons in a form. However, these set colours might not meet contrast guidelines in comparison to the background colour (we are working specifically towards meeting AA contrast ratio).
Suggestion
We are considering in creating a feature where we suggest the user a colour that has a AA-passing luminance in case the chosen colour does not meet the contrast guideline.
I would suggest a feature/function where 2 arguments are passed:
- colour 1 (background colour)
- colour 2 (foreground colour)
Return value: an accessible colour (could be either colour 2 if the contrast ratio with colour 1 is more than 4.5, or a related one with higher/lower luminance)
The How-to
IF CR < 4.5:
- I would use the Contrast Ratio formula:
CR = (L1 + 0.05)/(L2 + 0.05), where CR >= 4.5
With this formula we can get the Luminance value needed for the foreground colour, to ensure the CR is higher than 4.5.
I have tested with the setLuminance colour from one of your GH issues: #148
And get back a suggested colour that passes the contrast guidelines.
Would a helper with this behaviour be of your interest? ✨
@bhough Thank you for adding the label! Could I work on opening a PR for this?
@joaoviana We'd certainly look at a PR for this for inclusion in v4. We will be undergoing a fairly major rewrite, so there may be some back and forth as we make progress on v4. As long as you don't mind then, send it our way!
Do not mind, at all! thank you ✨