Testing Color Contrast & Simulating Color Blindness with the Firefox Accessibility Inspector

[@JesseDugasjd]

Epic! Can’t wait to see more and I’m glad accessibility is starting to finally get more awareness.

[@kbtkitchenbeautytech4246]

Yes true

[@patrickc.6183]

This is what I needed! Really practical new features in Firefox :)!

[@thisisdoom]

Awesome! Exactly what I was looking for.

[@AkashaRecordsEU]

So much thx for this tip, the CVDS (may I short it so?) was not active in about:config, just activated and restarted the fox, now it works. But make sure your Inspektor window is big enough, the dropdown seems buggy when inspector hight is low (no scrolling)

[@avneet12284]

Crazy good video 👌. Enjoyed it

[@lrfious]

5:21 According to this article, white text on colorful backgrounds can be an accessible combination even while failing to meet the contrast ratio. uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/

[@martiddy]

I activated the webrender in config, but I still do not have the simulation option available :(

[@ranaakhil]

Thanks a lot. Great stuff.

[@joemaffei]

Did the color vision deficiency simulation feature get removed from the accessibility panel? I'm on Firefox 85 and I can't find it.

[@Lernschau]

I used the Accessibility Panel since it became available and it's a great tool, but... (there's always a but isn't it ) It would be great to have the *"Scroll into view"* feature from the Inspector's node context menu right along the "target" icon in the Accessibility Properties panel, or inside the "Role" / "Name" column of an entry. In large and complex documents the back-and-forth between Inspector and the Accessibility Panel & all that context menu clicking to check where one screwed up can become very tedious. I absolutely love your work, Jen! (when will the Layout.land website be ready ???)

[@rubenmedios]

Hi, great demostration, why my firefox do not show the defficiency color simulator? is possible when the imac is some old? i see accessibility inspector, but color blindness simulator can't see

[@rubenmedios]

@@MozillaDeveloper thanks, you are the best

[@liho26]

Hi Jen. Thank you for the good content in mv. But I world like to ask another question. When Firefox Will supports select css attributes. Now, if I want customize select and option, I should use javascript.

[@liho26]

@@MozillaDeveloper Nice! I will wait, Jen! Hope something new will be bring in 2020! :)

[@arisweedler4703]

So cool!

[@123matejm]

Great!

[@swampflux]

Fancy!

[@doug-q9n]

Stop with the double U CAG. It's WiCAG (like Wick AG). But thanks for the FF color contrast tool. Handy

[@kbtkitchenbeautytech4246]

It's WCAG

[@doug-q9n]

@@kbtkitchenbeautytech4246 Yes, was just providing a phonetic spelling.

[@alanraftel5033]

I've been reading an interesting conversation github.com/w3c/wcag/issues/695 about the math behind the contrast ratio. the current formula `(L1 + 0.05)/(L2 + 0.05)` may change to `(L1 - L2)/(L1 + 0.1)` in the future. As a developer, should I care about this change? I'm developing a website that has the infamous orange as a primary color. I do want to meet WCAG 2.0 AA, but it's difficult to tweak the orange color on white background. With the possible change of formula in WCAG 3.0, some variants of orange can be accessible.