DEV Community

Cover image for Building your own color contrast checker

Building your own color contrast checker

Alvaro Montoro on November 27, 2019

Insufficient color contrast is one of the most common issues when talking about Web Accessibility. In fact, it was the most common problem found in...
Collapse
 
vaibhavsaharan profile image
Vaibhavsaharan

How to incorporate opacity while calculating contrast? One possible solution might be blending opacity layer to bg color and use these functions?

Collapse
 
alvaromontoro profile image
Alvaro Montoro

That is an interesting question. There are functions that mix colors, maybe using those we can combine alphas (or come up with our own), but that one is always a messy one (as there may still be some background color that we are not considering)

Collapse
 
guzzapower profile image
GuzzaPower

Thank you for posting this. :)

Collapse
 
tomhermans profile image
tom hermans

Thanks. Gonna see how I can work this in my design system.

Collapse
 
bacloud22 profile image
aben

Thanks ! I'm no expert in image processing, but you are x)
So I was looking for any simple methods to assess image quality, I know this is a hard subject, but if we reason by exclusion I think we can find interesting ways to spot low quality images.
For instance, first rule I could find is brightness, if it is say above 230 or bellow 20 the image is of bad quality.
In the same way, do you have any scores to suggest to spot bad quality images ?
I searched a lot and I could only find ML models which are tedious to implement and deploy.

Collapse
 
lucamug profile image
lucamug

Note from w3.org/WAI/WCAG21/Techniques/gener...

Before May 2021 the value of 0.04045 in the definition was different (0.03928). It was taken from an older version of the specification and has been updated. It has no practical effect on the calculations in the context of these guidelines.

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

Hey thanks for the post.
What should we do if we have rgba color?

Collapse
 
keziahmoselle profile image
Keziah

Awesome ! Thank you for this article

Collapse
 
aromanarguello profile image
aromanarguello

Hero! this is awesome thanks for sharing :)

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!

Collapse
 
johnsawiris profile image
John Sawiris

This is fantastic! Thank you for sharing!