Insufficient color contrast on server pages

[kimberlythegeek]

Element has insufficient color contrast of 3
foreground color: #009ec0,
background color: #f9f9fa,
font size: 9.0pt,
font weight: normal

Expected contrast ratio of 4.5:1

detailed information on color-contrast rule

Rule Violated:
  color-contrast - Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds
  	URL: https://dequeuniversity.com/rules/axe/3.1/color-contrast?application=axeAPI
  	Impact Level: serious
  	Tags: cat.color wcag2aa wcag143
  	Elements Affected:
  	1) Target: .legal-links > a[target="_blank"][rel="noopener\ noreferrer"]:nth-child(1)
  		Element has insufficient color contrast of 3 (foreground color: #009ec0, background color: #f9f9fa, font size: 9.0pt, font weight: normal). Expected contrast ratio of 4.5:1
  	2) Target: a[target="_blank"][rel="noopener\ noreferrer"]:nth-child(2)
  		Element has insufficient color contrast of 3 (foreground color: #009ec0, background color: #f9f9fa, font size: 9.0pt, font weight: normal). Expected contrast ratio of 4.5:1
  	3) Target: a[target="_blank"][rel="noopener\ noreferrer"]:nth-child(3)
  		Element has insufficient color contrast of 3 (foreground color: #009ec0, background color: #f9f9fa, font size: 9.0pt, font weight: normal). Expected contrast ratio of 4.5:1
  	4) Target: a[target="_blank"][rel="noopener\ noreferrer"]:nth-child(4)
  		Element has insufficient color contrast of 3 (foreground color: #009ec0, background color: #f9f9fa, font size: 9.0pt, font weight: normal). Expected contrast ratio of 4.5:1
  	5) Target: a[target="_blank"][rel="noopener\ noreferrer"]:nth-child(5)
  		Element has insufficient color contrast of 3 (). Expected contrast ratio of 4.5:1
  	6) Target: a[target="_blank"][rel="noopener\ noreferrer"]:nth-child(6)
  		Element has insufficient color contrast of 3 (foreground color: #009ec0, background color: #f9f9fa, font size: 9.0pt, font weight: normal). Expected contrast ratio of 4.5:1

[kimberlythegeek]

Also, I don't have sufficient permissions to add tags or request reviews.

[punamdahiya]

With new UI, Insufficient color contrast on footer links is resolved. Using this issue to resolve color contrast error seen on homepage,shots and myshots page

[punamdahiya]

Running homepage screenshots.firefox.com with axe extension errors insufficient color contrast for
a) text inside banner (.message > p)
b) white text 'Firefo Screenshots Screenshots made simple. Take, save, and share screenshots without leaving Firefox.' on background-color #04D1E6 as contrast ratio is less than 3.

Changing text-color to black over background #04D1E6 increases contrast ratio to 11 and fixes error.

@eeejay @kimberlythegeek whats general guideline for making page color contrast accessible, will ensuring contrast in few sections depending on text usability suffice.

I am seeing color contrast accessibility error while analyzing few major websites with axe so not sure if we should blanket fix all contrast errors.

@youwenliang @johngruen To fix all the contrast errors we will need to request UX feedback to provide new foreground- background color and images.

[ianb]

This issue is being closed (without being fixed) because we are discontinuing the Screenshots server.