1473037 - Show color contrast ratio between accessible text object and its background with info-bar highlight

Status: RESOLVED FIXED

(DevTools :: Accessibility Tools, enhancement, P3)

Description

[Micah [:mtigley] (she/her)]

Attachment: ContrastRatio.png

Displaying the contrast ratio between an accessible text object and its background would be very useful for inspecting the accessibility of a web page's content. For the a11y inspector, a current accessible text's AA and AAA scores would be easily found in its highlighter's info-bar. Please see attached screenshot for an example.

For reference: https://webaim.org/resources/contrastchecker/

Comment 1

[Micah [:mtigley] (she/her)]

Attachment: Bug1473037_initial.patch

Initial work for contrast ratio.

Comment 2

[Micah [:mtigley] (she/her)]

Attachment: Bug1473037_v1.patch

Patch work for the contrast ratio. Includes a generic contrast ratio view component.

Comment 3

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug1473037_v2.patch

Comment 4

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1473037 - Display contrast ratio for text nodes inside the accessibility infobar. r=gl

Co-authored-by: Micah Tigley <[e-mail]>

MozReview-Commit-ID: 1KbcRG0bZA3

Comment 5

[Patrick Brosset <:pbro>]

Comment on attachment 9006297 [details]
Bug 1473037 - Display contrast ratio for text nodes inside the accessibility infobar. r=gl

Patrick Brosset <:pbro> has approved the revision.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6bca826c27cf
Display contrast ratio for text nodes inside the accessibility infobar. r=pbro

Comment 7

[Andrei Ciure[:aciure]]

https://hg.mozilla.org/mozilla-central/rev/6bca826c27cf

Comment 8

[Irene Smith]

Added the following to the Firefox 64 release notes:

The Accessibility info-bar has been enhanced to include information about the color contrast ratio of text or images on the web page. ({{bug(1473037)}}).

And also modified the section of the page that describes the highlighting UI items (https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector#Highlighting_of_UI_items) to add a section on color contrast as follows:

Color Contrast

Contrast ratio information is particularly useful when you are designing the color palette for your website because if the contrast is not sufficient, readers with visual impairments such as color blindness will be unable to read the text. The Web Content Accessibility Guidelines (WCAG) 2.0 defines 4.5:1 as the minimum suggested contrast ratio between the foreground and background colors for smaller text on a web page. For example:

The color contrast in the image above is 2.77, potentially not enough contrast to make it easy to read. Notice the warning symbol that indicates that the contrast fails to meet the acceptable contrast ratio. Compare that to the following:

In this example, the contrast is 12.63. This time the number is follow by AAA and a checkmark in green, indicating that the text has a contrast ratio of 7:1 or more, meaning it meets the criteria for enchanced contrast, or Level AAA.

(with appropriate images, of course!)

Comment 9

[Yura Zenevich [:yzen] (please use "needinfo")]

(In reply to Irene Smith from comment #8)
> Added the following to the Firefox 64 release notes:
> 
> The Accessibility info-bar has been enhanced to include information about
> the color contrast ratio of text or images on the web page.
> ({{bug(1473037)}}).
> 
> And also modified the section of the page that describes the highlighting UI
> items
> (https://developer.mozilla.org/en-US/docs/Tools/
> Accessibility_inspector#Highlighting_of_UI_items) to add a section on color
> contrast as follows:
> 
> Color Contrast
> 
> Contrast ratio information is particularly useful when you are designing the
> color palette for your website because if the contrast is not sufficient,
> readers with visual impairments such as color blindness will be unable to
> read the text. The Web Content Accessibility Guidelines (WCAG) 2.0 defines
> 4.5:1 as the minimum suggested contrast ratio between the foreground and
> background colors for smaller text on a web page. For example:
> 
> The color contrast in the image above is 2.77, potentially not enough
> contrast to make it easy to read. Notice the warning symbol that indicates
> that the contrast fails to meet the acceptable contrast ratio. Compare that
> to the following:
> 
> In this example, the contrast is 12.63. This time the number is follow by
> AAA and a checkmark in green, indicating that the text has a contrast ratio
> of 7:1 or more, meaning it meets the criteria for enchanced contrast, or
> Level AAA.
> 
> (with appropriate images, of course!)

Hi Irene thanks for the doc update! A couple of comments:

- We probably need to add a caveat where the color contrast does not work yet with elements that have image backgrounds or gradients.
- When we mention smaller text, I believe it is supposed to be "normal" size text. Do you think it will be worthwhile also mentioning what the criteria are for larger text as well as a link to a more detailed explainer (I think we already link to https://webaim.org/resources/contrastchecker/ from https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast).

And just to confirm that this is only going to be available in 64?

Comment 10

[Yura Zenevich [:yzen] (please use "needinfo")]

See comment 9, thanks

Comment 11

[Irene Smith]

Thank you both for commenting so quickly. I will take care of the changes later today.

Since this is 64, do we want to actually say that? I was adding that information but was told several times that I shouldn't put version information in the docs. In this case, it is probably warranted to say "Available in Firefox 64, but if you want to use the feature now, it is already available in Firefox Developer Edition."

Comment 12

[Yura Zenevich [:yzen] (please use "needinfo")]

(In reply to Irene Smith from comment #11)
> Thank you both for commenting so quickly. I will take care of the changes
> later today.
> 
> Since this is 64, do we want to actually say that? I was adding that
> information but was told several times that I shouldn't put version
> information in the docs. In this case, it is probably warranted to say
> "Available in Firefox 64, but if you want to use the feature now, it is
> already available in Firefox Developer Edition."

I think it's fine not to have the version information, just making sure that users who use the tool in current release (63) do not get confused.