digitala11y.com

WCAG Color Contrast Checker and Palette Generator by DigitalA11Y Achieve full WCAG compliance with ease using DigitalA11Y’s Color…

Latest Version

Version

1.1

Update

October 25, 2024

Size

52.43KiB

Developer

digitala11y.com

Color Contrast Checker by DigitalA11Y Extension

WCAG Color Contrast Checker and Palette Generator by DigitalA11Y

Achieve full WCAG compliance with ease using DigitalA11Y’s Color Contrast Checker and Palette Generator Chrome extension! Designed to assist designers, developers, and accessibility professionals, this tool quickly calculates and verifies color contrast ratios, ensuring your website aligns with WCAG accessibility standards.

Features:

•⁠ ⁠Quick Access Pop-up: A handy, intuitive pop-up provides instant access to all features.
•⁠ ⁠One-Click Color Picker: Select background and foreground colors directly from any webpage to assess contrast.
•⁠ ⁠Hexadecimal Input Option: Enter hex color codes manually to verify color contrast compliance.
•⁠ ⁠Instant Contrast Ratio Display: See real-time contrast ratio results and WCAG compliance status.
•⁠ ⁠Alternative Color Suggestions: Receive recommended color codes that meet WCAG contrast requirements.
•⁠ ⁠Flexible Pop-up Control: Close or minimize the pop-up for an unobstructed view, and adjust its size to access content behind it.

Whether you're performing a web accessibility audit, designing a color palette, or checking color contrast, this free tool ensures you stay within WCAG standards.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Color Contrast Checker by DigitalA11Y", "version": "1.1", "action": { "default_popup": "index.html", "default_title": "DigitalA11Y Color Contrast Checker" }, "icons": { "32": "images/icon32.png" }, "permissions": [ "activeTab", "scripting" ], "background": { "service_worker": "background.js" }}

Download CRX(52.43KiB)

Similar Extensions

Color Contrast Checker Extension · Accessibility 1,000+ 10 ★ 2.85MiB

A11y quick check Extension · Accessibility 1,000+ 4 ★ 465KiB

HeadingsMap Extension · Developer Tools 1,000+ 70 ★ 575KiB

Color Contrast Analyzer Extension · Accessibility 1,000+ 66 ★ 58.27KiB

IBM Equal Access Accessibility Checker Extension · Developer Tools 1,000+ 16 ★ 29.19MiB

Colour Contrast Checker Extension · Accessibility 1,000+ 31 ★ 378KiB

DigitalA11Y Tublets Extension · Accessibility 1,000+ 7 ★ 162KiB

ARC Toolkit Extension · Accessibility 1,000+ 24 ★ 645KiB

WCAG Color contrast checker Extension · Developer Tools 1,000+ 26 ★ 163KiB

WAVE Evaluation Tool Extension · Accessibility 1,000+ 143 ★ 344KiB

HalfAccessible - Accessibility Toolkit Extension · Accessibility 1,000+ 9 ★ 397KiB

Siteimprove Accessibility Checker Extension · Accessibility 1,000+ 21 ★ 1.43MiB

LERA Extension · Accessibility 1,000+ 45 ★ 1.89MiB

axe DevTools - Web Accessibility Testing Extension · Accessibility 1,000+ 114 ★ 2.89MiB

Accessible Web Helper Extension · Accessibility 1,000+ 12 ★ 1.97MiB

BrowserStack Accessibility Toolkit Extension · Accessibility 1,000+ 61 ★ 3.49MiB

Stark Accessibility Checker Extension · Developer Tools 1,000+ 22 ★ 2.29MiB

Silktide Accessibility Checker Extension · Accessibility 1,000+ 30 ★ 11.56MiB

Visual ARIA Extension · Accessibility 1,000+ 4 ★ 314KiB

ARIA DevTools Extension · Developer Tools 1,000+ 32 ★ 491KiB

taba11y Extension · Developer Tools 1,000+ 15 ★ 205KiB

Accessibility monitor Extension · Accessibility 1,000+ 0 ★ 96.89KiB

Accessibility Insights for Web Extension · Developer Tools 1,000+ 37 ★ 3.62MiB

EqualWeb Accessibility Checker Extension · Accessibility 1,000+ 21 ★ 19.11MiB

User reviews

Jazz Rich (ID: 000000fd4dd2f49b) Voted 3 ★ - Updated 02/23/2023 Can't close or resize the panel... Always resets to #fff on #000

Eric Bonar (ID: 0000008f4d7052f6) Voted 5 ★ - Updated 02/22/2023 I like the ease of use and how straight forward it is. I can easily copy and paste HEX codes into the different sections, or use the eyedropper to grab the color I need. An issue with the eyedropper is that it's zoomed in so much that it can be a little difficult to get on a row or column of pixels in order to grab the color you're trying to get. I tried it on the menu of my client's site and the pixels it showed for the text were various colors (I'll comment with a screenshot). I typically use ColorZilla to grab color codes, but it's zoom is not as good as yours. Having the iframe take up space at the top of the window, and not being able to adjust the height of it will take a little getting used to. This is not a complaint, btw. I appreciate that you included a "More color details" section that can expand to show the wcag color levels chart for the text color, and the various colors within that range below the chart. That makes it so much easier to decide which color to use. Overall, GREAT JOB! This is going to be the one I use for testing from now on.

Aamir Raza (ID: 0000002810b6a941) Voted 5 ★ - Updated 01/25/2023 I find your service to be very helpful as I no longer have to switch between windows to test color contrast.

Get source code (.Zip)

Drop .crx file here or click
the button to choose the file

Color Contrast Checker by DigitalA11Y