Testing Color Contrast & Simulating Color Blindness with the Firefox Accessibility Inspector
HTML-код
- Опубликовано: 11 сен 2024
- How can you easily check to make sure your choices of color are accessible - that as many people as possible will be able to see your content, no matter what kind of vision they have? Firefox Accessibly Tools can help you quickly test and know what decisions to make. Jen Simmons gives you a tour of the Color Contrast tools, and the Color Deficiency Simulator.
Be sure to watch the part at 6:40 if the Color Deficiency Simulator is not showing up on your copy of Firefox. I'll explain how to get it.
• developer.mozi...
• hacks.mozilla....
#accessibility #firefoxdevtools #jensimmons
Epic! Can’t wait to see more and I’m glad accessibility is starting to finally get more awareness.
Yes true
This is what I needed! Really practical new features in Firefox :)!
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 ???)
Awesome! Exactly what I was looking for.
Thanks a lot. Great stuff.
Did the color vision deficiency simulation feature get removed from the accessibility panel? I'm on Firefox 85 and I can't find it.
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)
I activated the webrender in config, but I still do not have the simulation option available :(
Crazy good video 👌. Enjoyed it
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.
@@MozillaDeveloper Nice! I will wait, Jen! Hope something new will be bring in 2020! :)
So cool!
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
@@MozillaDeveloper thanks, you are the best
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/
Great!
Fancy!
Stop with the double U CAG. It's WiCAG (like Wick AG). But thanks for the FF color contrast tool. Handy
It's WCAG
@@kbtkitchenbeautytech4246 Yes, was just providing a phonetic spelling.
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.