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

RESOLVED FIXED in Firefox 64

Status

enhancement
P3
normal
RESOLVED FIXED
10 months ago
6 months ago

People

(Reporter: mtigley, Assigned: yzen, Mentored)

Tracking

(Blocks 1 bug, {access, dev-doc-complete})

unspecified
Firefox 64

Firefox Tracking Flags

(firefox64 fixed)

Details

Attachments

(1 attachment, 4 obsolete attachments)

(Reporter)

Description

10 months ago
Posted 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/
(Assignee)

Updated

10 months ago
Priority: -- → P3
(Reporter)

Comment 1

9 months ago
Posted patch Bug1473037_initial.patch (obsolete) — Splinter Review
Initial work for contrast ratio.
(Reporter)

Comment 2

8 months ago
Posted 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
(Assignee)

Updated

8 months ago
Attachment #8989446 - Attachment is obsolete: true
(Assignee)

Comment 3

8 months ago
Posted patch Bug1473037_v2.patch (obsolete) — Splinter Review
Attachment #9004655 - Flags: review?(gl)
Attachment #9004655 - Flags: review?(gl)
(Assignee)

Comment 4

8 months ago
Co-authored-by: Micah Tigley <mtigley@mozilla.com>

MozReview-Commit-ID: 1KbcRG0bZA3
(Assignee)

Updated

8 months ago
Attachment #9004655 - Attachment is obsolete: true
(Assignee)

Updated

8 months ago
Attachment #9003816 - Attachment is obsolete: true
(Assignee)

Updated

8 months ago
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+

Comment 6

7 months ago
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

Comment 7

7 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/6bca826c27cf
Status: ASSIGNED → RESOLVED
Last Resolved: 7 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 64

Comment 8

6 months ago
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)
(Assignee)

Comment 9

6 months ago
(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)
(Assignee)

Comment 10

6 months ago
See comment 9, thanks
Flags: needinfo?(irenesmith13)

Comment 11

6 months ago
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)
(Assignee)

Comment 12

6 months ago
(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)
(Assignee)

Updated

6 months ago
See Also: → 1505848
You need to log in before you can comment on or make changes to this bug.