Item logo image for WCAG Color contrast checker

WCAG Color contrast checker

Featured
4.2(

26 ratings

)
Item media 1 screenshot

Overview

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

It checks the color contrast between the foreground and background of the elements that are in the page according to the WCAG 2.2. It evaluates the contrast on all elements of the page considering their computed style for the color and background-color CSS properties. In case of these colors are defined with RGBA values, it also considers the opacity to deduce the real color that finally is show. It can simulate color blindness and evaluate the contrast for the simulations. By this way, developers can see how the pages look for colorblind users. The tool also includes two fields in which the colors can be introduced manually to be tested. It also allows to pick the color directly from the documents. Finally, it auto-refreshes when DOM of the page changes (addition or removing elements), but if the page has many changes, this behavior can be de-activated. Privacy statement on: https://rumoroso.bitbucket.io/

4.2 out of 526 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

K BSep 27, 2024

Haven't had any major issues with it. Works well for what it is and can quickly verify contrast on page across multiple visual deficiencies.

Review's profile picture

Orgoth DorngreeAug 7, 2024

Does not really work well, in some cases it detects the wrong colors for for- and background. forground: #ffffff background: #ffffff But on page it is: forground: #ffffff background: rgba(25, 145, 238, 0.8) It also does not respect text-shadows which improve the readability, which is confirmed by people with very bad eyesight.

Replier's profile picture

Jorge RumorosoDeveloperSep 20, 2024

Hi, thank you for sharing your opinion. To improve the extension, could you please share the page in which the problem with wrong color identification is happening? By this way I could check what could be the reason for that and fix it. Regarding the text-shadows, to be hones, it is not a property that it checks. It basically tries to identify the computed color, the computed background, and if there are elements with opacity, tries to estimate the color with that information, but it never considered the text-shadows. I will start thinking about it and try to find a way to analyze it. I guess it will be a bit tricky, specially because the shadow can varies depending on the distance and also the direction. I am not sure if that case will be feasible. Thank you very much, and again, if you can provide the scenario in which it apparently fails it would be very useful to improve it.

Review's profile picture

Sam RevierMar 21, 2024

Love it! Would be great if you could add support for APCA and Oklch colors as well.

1 out of 2 found this helpful

Details

  • Version
    3.8.4
  • Updated
    March 2, 2024
  • Offered by
    Jorge Rumoroso
  • Size
    163KiB
  • Languages
    English
  • Developer
    Email
    rumoroso@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

HeadingsMap

4.6(70)

To show, browse and audit (for accessibility and SEO) the headings structure

Siteimprove Accessibility Checker

3.3(21)

Jumpstart your web accessibility efforts directly in Chrome.

EqualWeb Accessibility Checker

4.1(21)

The EqualWeb Web Accessibility Checker is a free automated auditing tool for WCAG 2.1 validation.

Accessibility Insights for Web

4.7(37)

Accessibility Insights for Web helps developers quickly find and fix accessibility issues.

Colour Contrast Checker

3.9(30)

Check the contrast between different colour combinations against WCAG standards

Color Contrast Analyzer

3.4(66)

Analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements.

WAVE Evaluation Tool

4.1(143)

Evaluate web accessibility within your browser.

Accessible Web Helper

4.7(12)

Discover and highlight accessibility violations on the web with the push of a button.

Color Contrast Checker

3.5(2)

Section 508 - Testing Web Content Accessibility

ColorA11y

4.0(5)

This Developer Tools extension allows you determine whether or not the color contrast on a site is WCAG 2.0 AA and AAA compliant.

axe DevTools - Web Accessibility Testing

4.0(114)

Accessibility Checker for Developers, Testers, and Designers in Chrome

Color Contrast Checker

4.7(10)

Color Contrast Checker & Recommendations Tool

HeadingsMap

4.6(70)

To show, browse and audit (for accessibility and SEO) the headings structure

Siteimprove Accessibility Checker

3.3(21)

Jumpstart your web accessibility efforts directly in Chrome.

EqualWeb Accessibility Checker

4.1(21)

The EqualWeb Web Accessibility Checker is a free automated auditing tool for WCAG 2.1 validation.

Accessibility Insights for Web

4.7(37)

Accessibility Insights for Web helps developers quickly find and fix accessibility issues.

Colour Contrast Checker

3.9(30)

Check the contrast between different colour combinations against WCAG standards

Color Contrast Analyzer

3.4(66)

Analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements.

WAVE Evaluation Tool

4.1(143)

Evaluate web accessibility within your browser.

Accessible Web Helper

4.7(12)

Discover and highlight accessibility violations on the web with the push of a button.

Google apps