1637847 - Active focus color for dark mode buttons in reader view popover is too light

Status: RESOLVED DUPLICATE of bug 1640417

(Toolkit :: Reader Mode, defect, P3)

Description

[Asif Youssuff]

Attachment: Screenshot from 2020-05-13 23-53-37.png

Steps to reproduce:

1. Go to https://getpocket.com/explore/item/who-still-buys-wite-out-and-why
2. Enable reader view
3. enable dark view
4. click any of increase/decrease font size, increase/decrease content width, and increase/decrease line height

What happens:

The color that on active click is too light/bright and looks out of place.

Expected result:

Something that feels a little less out of place, likely a bit darker.

Comment 1

[Mike Conley (:mconley) (:⚙️)]

Hi akshitha! Any chance you might have some time to look at this?

Comment 2

[Mathew Hodson]

This issue existed before the redesign. I can reproduce it on Firefox 76 when I click on one of the font, width, or height buttons.

It looks like it's using #fff and #dadada in aboutReader.css. This has a contrast ratio of 1.39:1, which doesn't satisfy Web Content Accessibility Guidelines.

body.dark {
  --font-color: #fff;
}
.button:active,
.font-size-buttons > button:active,
.font-size-buttons > button.selected,
.content-width-buttons > button:active,
.content-width-buttons > button.selected,
.line-height-buttons > button:active,
.line-height-buttons > button.selected {
  background-color: #dadada;
}

Comment 3

[:Gijs (he/him)]

I fixed this in bug 1640417.