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

Поділитися
Вставка
  • Опубліковано 29 лис 2024

КОМЕНТАРІ • 22

  • @JesseDugasjd
    @JesseDugasjd 5 років тому +12

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

  • @patrickc.6183
    @patrickc.6183 5 років тому +3

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

  • @Lernschau
    @Lernschau 5 років тому +1

    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 ???)

  • @AkashaRecordsEU
    @AkashaRecordsEU 5 років тому +1

    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)

  • @lrfious
    @lrfious 5 років тому +1

    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/

  • @thisisdoom
    @thisisdoom 4 роки тому +1

    Awesome! Exactly what I was looking for.

  • @joemaffei
    @joemaffei 3 роки тому

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

  • @martiddy
    @martiddy 4 роки тому

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

  • @avneet12284
    @avneet12284 5 років тому +1

    Crazy good video 👌. Enjoyed it

  • @ranaakhil
    @ranaakhil 5 років тому +2

    Thanks a lot. Great stuff.

  • @rubenmedios
    @rubenmedios 5 років тому

    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
      @rubenmedios 5 років тому

      @@MozillaDeveloper thanks, you are the best

  • @liho26
    @liho26 5 років тому

    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
      @liho26 5 років тому

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

  • @doug-q9n
    @doug-q9n 5 років тому

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

  • @arisweedler4703
    @arisweedler4703 5 років тому

    So cool!

  • @123matejm
    @123matejm 5 років тому

    Great!

  • @swampflux
    @swampflux 5 років тому

    Fancy!

  • @alanraftel5033
    @alanraftel5033 5 років тому

    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.