Accepts any CSS color the browser does, not just hex colors.If your math is less rusty than mine, I’d appreciate any feedback on my reasoning there.īelow is a list of features that make this tool unique for calculating color contrast ratios: In addition, I discovered that there was no documented way of calculating the contrast ratio range that can be produced with a semi-transparent background, so I came up with an algorithm (after many successive failures to find the range intuitively), published it in the w3c-wai-ig mailing list and used the algorithm in my app, effectively making it the first one that can accept semi-transparent colors. After doing that for a few days, I got so fed up that I decided to make my own tool. So, I had to calculate the resulting opaque colors after alpha blending had taken place. When using semi-transparent colors, it was even worse: Since WCAG only describes an algorithm for opaque colors, all contrast tools only expect that. In addition, I had to adjust the lightness of the colors with a blindfold, without being able to see the difference my adjustments would make to the contrast ratio. I had to convert my CSS colors to hex notation (which I don’t often use myself anymore), check the contrast ratio, then adjust the colors as necessary, covert again etc. However, I found that my workflow for checking a contrast ratio with them was far from ideal. There are plenty of tools out there for this. So, effectively 90% of combinations will pass (82.5% for smaller, non-bold text). After all, the possible range for a contrast ratio is 1-21 but only ratios lower than 3 don’t pass WCAG AA (4.5 if you have smaller, non-bold text). Surprisingly, in practice, I found that in most cases they are very reasonable: When a color combination doesn’t pass WCAG, it usually *is* hard to read. I used to think that WCAG-mandated contrast ratios were too restrictive and basically tried to force you to use black and white, a sentiment shared by many designers I’ve spoken to. Therefore, I found myself calculating color contrast ratios very frequently. At W3C, accessibility is considered very important, so everything we make needs to pass WCAG 2.0 AA level. I was always interested in accessibility, but I never had to comply with any guidelines before.

Colour contrast analyser multi screen