Closed Bug 1473037 Opened 2 years ago Closed 2 years ago

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

Categories

(DevTools :: Accessibility Tools, enhancement, P3)

enhancement

Tracking

(firefox64 fixed)

RESOLVED FIXED
Firefox 64
Tracking Status
firefox64 --- fixed

People

(Reporter: mtigley, Assigned: yzen, Mentored)

References

Details

(Keywords: access, dev-doc-complete)

Attachments

(1 file, 4 obsolete files)

Attached image ContrastRatio.png (obsolete) —
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/
Priority: -- → P3
Attached patch Bug1473037_initial.patch (obsolete) — Splinter Review
Initial work for contrast ratio.
Attached patch Bug1473037_v1.patch (obsolete) — Splinter Review
Patch work for the contrast ratio. Includes a generic contrast ratio view component.
Attachment #8998578 - Attachment is obsolete: true
Attachment #8989446 - Attachment is obsolete: true
Attached patch Bug1473037_v2.patch (obsolete) — Splinter Review
Attachment #9004655 - Flags: review?(gl)
Attachment #9004655 - Flags: review?(gl)
Co-authored-by: Micah Tigley <mtigley@mozilla.com>

MozReview-Commit-ID: 1KbcRG0bZA3
Attachment #9004655 - Attachment is obsolete: true
Attachment #9003816 - Attachment is obsolete: true
Assignee: nobody → yzenevich
Status: NEW → ASSIGNED
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.
Attachment #9006297 - Flags: review+
Pushed by yura.zenevich@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/6bca826c27cf
Display contrast ratio for text nodes inside the accessibility infobar. r=pbro
https://hg.mozilla.org/mozilla-central/rev/6bca826c27cf
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 64
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!)
Flags: needinfo?(yzenevich)
(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?
Flags: needinfo?(yzenevich)
See comment 9, thanks
Flags: needinfo?(irenesmith13)
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."
Flags: needinfo?(irenesmith13) → needinfo?(yzenevich)
(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.
Flags: needinfo?(yzenevich)
See Also: → 1505848
You need to log in before you can comment on or make changes to this bug.