Issue Summary

Some informative images with insufficient color contrast were found in the “Custom emoticons“ non-modal dialog.

Note: This issue is also observed on “creating/editing” a “page/blog/comment”

Steps to Reproduce

1. Navigate to the “Create”> “Blank Page“> “Create“.
2. Open the “Add Page - A sample space - Bulldog“ page.
3. Navigate to the “Insert emoji“ image link.
4. Check the color contrast of the emoji’s using Color Contrast Analyser tool.

Actual Results

Refer following foreground and background contrast ratios of “Default emoji's“ in a default state.

• The #FFCC4C "Smile", “Sad“, “Cheeky“, etc. Informative images in the non-modal dialog have insufficient color contrast ratio of 1.5:1 with #FFFFFF background.

• The #FFDA5E "thumbs-up" and “thumbs-down“ Informative images in the non-modal dialog have insufficient color contrast ratio of 1.4:1 with #FFFFFF background.

• The #FFD883 "light-on“ Informative image in the non-modal dialog have insufficient color contrast ratio of 1.4:1 with #FFFFFF background.

• The #FFC203 "warning“ Informative image in the non-modal dialog have insufficient color contrast ratio of 1.6:1 with #FFFFFF background.

• The #E3ECF1 "light-off“ Informative image in the non-modal dialog have insufficient color contrast ratio of 1.2:1 with #FFFFFF background.

“Default emoji’s“ on hover state.

• The #FFCC4C "Smile", “Sad“, “Cheeky“, etc. Informative images in the non-modal dialog have insufficient color contrast ratio of 1.3:1 with #EBECF0 background.

• The #FFDA5E "thumbs-up" and “thumbs-down“ Informative images in the non-modal dialog have insufficient color contrast ratio of 1.2:1 with #EBECF0 background.

• The #FFD883 "light-on“ Informative image in the non-modal dialog have insufficient color contrast ratio of 1.2:1 with #EBECF0 background.

• The #E3ECF1 "light-off“ Informative image in the non-modal dialog have insufficient color contrast ratio of 1.2:1 with #EBECF0 background.

• The #FFC203 "warning“ Informative image in the non-modal dialog have insufficient color contrast ratio of 1.4:1 with #EBECF0 background.

Expected Results

For all informative images, ensure that the contrast between foreground, background or adjacent colors is 3:1 to make the image's information accessible for users with low vision and color-blindness.

Screenshot

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available