WCAG Color contrast checker

#4.13 / 30 rate

WCAG Color contrast checker

80,000 users

2020-06-26

Jorge Rumoroso

Extension Information

5 star
48%
4 star
13%
3 star
26%
2 star
9%
1 star
4%

Supported Languages

Permissions

Hot Permissions

Description

To check the color contrast between foreground and background of the texts

Reviews

Hu*****
Hu*****

It understandably doesn't detect the background color correctly when the background is an element with opacity over a background image. When this happens, I'd like to manually select the background color to confirm the contrast is high enough, but when I select the correct background color with the eyedropper tool, the contrast listed doesn't update. The color is picked correctly, except as an rgba color with an alpha of 0. It does this even if the color I'm picking has no opacity. I have to go to an external tool to convert this to a hex color and paste it back in as a hex to get the contrast checker to update. It would save a lot of time if the eyedropper tool picked a hex color. Once I manually correct a background color, it would also help if I could save this at least until the page reloads, so I can more easily identify which colors I haven't checked yet.

Pa*****
Pa*****

It seems it doesn't work on localhost, at lest with Svelte develoment environement, so not very useful

We*****
We*****

I tried a bunch of contrast checking extensions and settled on this one! What I liked: 1) Immediately loads all the contrast pairs it finds in the page with no need to manually capture areas. 2) Provides the actual contrast ratios, not just a pass/fail grade. 3) You can still manually enter colour values if you want. 4) Has an awesome feature where you can quickly switch between different types of colour-blindness to see how those conditions impact the contrasts! Limitations: 1) Some pages will have problem areas such as text on background images which this system can not account for. 2) In a complex page, it can be difficult to identify a specific area in the page to find its contrast report. It needs to be located in reverse: clicking on the contrast pairs list items puts a red border on that element in the page (& scrolls to it). This helps, but some are still hard to locate. 3) The grading system only offers two levels (WCAG2.2 AA & AAA). It would be nice to have a custom field to set a targeted standard. 4) It would be nice if the custom colour entry had an eye-dropper tool. This would assist in problems 1 & 2.

Similar extensions

Colour Contrast Checker
Colour Contrast Checker

https://colourcontrast.cc/

Color Contrast Analyzer
Color Contrast Analyzer

http://accessibility.oit.ncsu.edu/

WAVE Evaluation Tool
WAVE Evaluation Tool

WebAIM

Accessible Web Helper
Accessible Web Helper

https://accessibleweb.com

Color Contrast Checker
Color Contrast Checker

18 Clans

Color Contrast Checker by DigitalA11Y
Color Contrast Checker by DigitalA11Y

https://digitala11y.com

ColorA11y
ColorA11y

longmatthewh

axe DevTools - Web Accessibility Testing
axe DevTools - Web Accessibility Testing

http://www.deque.com/

Color Contrast Checker
Color Contrast Checker

https://pivotalaccessibility.com

EqualWeb Accessibility Checker
EqualWeb Accessibility Checker

EqualWeb

Accessibility Insights for Web
Accessibility Insights for Web

Accessibility Insights Team

HeadingsMap
HeadingsMap

Jorge Rumoroso