Add WCAG contrast level checker#28
Conversation
Based on code from https://gist.github.com/ngquerol/23d6d5ebd051e18682badafa37e48442. The calculated contrast ratio can be passed to the WCAGLevel constructor to get the final contrast level.
When enabled, a new label will show up in the picker detail view. The label will show the WCAG contrast level between the currently color and the previously picked one. The background color of the label is also the previously picked color to provide a visualization of the contrast.
|
Looks great!
I'm happy with that - seems like a good fit to me. Throw that in and we can get this through. :) |
|
@fabianlindfors Do you need any help so we can merge this? |
|
I would love to see this feature merged |
df165b5 to
b688355
Compare
|
This totally slipped my mind, sorry about that! @acheronfail @karbassi @viktorstrate The README has been updated now and if everything looks good then it's ready to merge! |
|
Thanks for the PR! On that note I think github actions have apple machines now, so I could look into that too... |
|
@acheronfail you can have GitHub actions create the release if you'd like. Here is an example of a project I lead. https://github.com/michaelvillar/timer-app/blob/master/.github/workflows/release.yml |
This PR adds a new feature allowing users to check the WCAG contrast level (https://www.w3.org/TR/WCAG20/) between two picked colours. When picking a colour, a new label will appear indicating the contrast level compared against the previously picked colour. The background of the label will also match the previous colour, providing for a nice side-by-side visualization.
There are four possible levels: AAA, AA, OK, and Fail. WCAG doesn't define a contrast ratio for level A and hence I opted to call it OK instead.
Here's what the feature looks like in action, comparing the heading colour to the background:
The feature is disabled by default and can be enabled with a toggle in the menu.
Remaining work
I have yet to add any information to the README as I thought I would check in with you first. Would you like the feature to be mentioned in the README? If so, what emoji would you find fitting? I personally like 🌓!