Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The state of toggle buttons is conveyed only via color with low contrast #1405

Closed
Comandeer opened this issue Dec 11, 2018 · 5 comments · Fixed by #12243
Closed

The state of toggle buttons is conveyed only via color with low contrast #1405

Comandeer opened this issue Dec 11, 2018 · 5 comments · Fixed by #12243
Assignees
@oleq
Labels
domain:accessibility This issue reports an accessibility problem. package:theme-lark squad:features Issue to be handled by the Features team. type:bug This issue reports a buggy (incorrect) behavior.
Milestone
iteration 56 (v35...

Comments

@Comandeer
Copy link
Member

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html

📋 Steps to reproduce

  1. Press "Bold" button.

✅ Expected result

The contrast between the button's background and toolbar is at least 3:1.

❎ Actual result

The contrast between the button and toolbar is around 1.28:1

📃 Other details that might be useful
@oleq oleq added type:bug This issue reports a buggy (incorrect) behavior. status:confirmed package:theme-lark labels Dec 11, 2018
@oleq oleq mentioned this issue Dec 11, 2018
Closed
@oleq oleq added the module:ux label Dec 11, 2018
@Reinmar Reinmar added this to the next milestone Mar 25, 2019
@mlewand mlewand added the domain:accessibility This issue reports an accessibility problem. label Jul 15, 2019
@Reinmar Reinmar removed the module:ux label Jan 15, 2020
@pomek pomek removed this from the nice-to-have milestone Feb 21, 2022
@Comandeer Comandeer added the squad:features Issue to be handled by the Features team. label May 30, 2022
@mlewand
Copy link
Contributor

mlewand commented Jun 10, 2022 •
edited
Loading

A way that CKE4 mitigates this issue is by adding an extra outline to the button.

Let's see what are the options to satisfy this requirement.

See:

Another option is to do what Google docs is doing: the background color of the icon changes ever so slightly but the icon color is changed significantly and it satisfies level AA contrast requirements. We have bunch of predefined CSS colors that might or might not be used for it.

@wimleers
Copy link

The outline sounds like a fine solution but IIRC @Reinmar indicated that this was considered too visually disruptive for the design.

@lauriii indicated similar challenges in the work he did on https://www.drupal.org/project/claro — this aspect was one of the most challenging problems!

FYI: tracking this at https://www.drupal.org/project/drupal/issues/3283803 😊

@mlewand
Copy link
Contributor

mlewand commented Jun 29, 2022

Lets mock quick and dirty examples based on #1405 (comment) and put screenshots here.

@oleq
Copy link
Member

oleq commented Jun 29, 2022

Some rough ideas:

@mlewand mlewand mentioned this issue Jun 29, 2022
Closed
@mlewand
Copy link
Contributor

mlewand commented Jun 29, 2022

Blocked by #11989

@Reinmar Reinmar mentioned this issue Jul 4, 2022
Closed
@oleq oleq self-assigned this Jul 7, 2022
@CKEditorBot CKEditorBot added the status:in-progress Set automatically when an issue lands in the "In progress" column. We are working on it. label Jul 7, 2022
@CKEditorBot CKEditorBot added status:planned Set automatically when an issue lands in the "Sprint backlog" column. We will be working on it soon. and removed status:in-progress Set automatically when an issue lands in the "In progress" column. We are working on it. labels Jul 18, 2022
@CKEditorBot CKEditorBot added status:in-progress Set automatically when an issue lands in the "In progress" column. We are working on it. status:planned Set automatically when an issue lands in the "Sprint backlog" column. We will be working on it soon. and removed status:planned Set automatically when an issue lands in the "Sprint backlog" column. We will be working on it soon. status:in-progress Set automatically when an issue lands in the "In progress" column. We are working on it. labels Aug 2, 2022
@oleq oleq mentioned this issue Aug 8, 2022
Merged
@CKEditorBot CKEditorBot added status:in-progress Set automatically when an issue lands in the "In progress" column. We are working on it. and removed status:planned Set automatically when an issue lands in the "Sprint backlog" column. We will be working on it soon. labels Aug 9, 2022
oleq added a commit that referenced this issue Aug 19, 2022
@oleq
Merge pull request #12243 from ckeditor/ck/1405-button-on-state-contrast
5b49b89 
Fix (theme-lark,ui): Changed the color of the pressed button text or an icons to improve contrast. Improved the border contrast of inputs and editing roots. Improved the look of the focused state of switch buttons. Closes #1405. Closes #11842.
@CKEditorBot CKEditorBot removed the status:in-progress Set automatically when an issue lands in the "In progress" column. We are working on it. label Aug 19, 2022
@CKEditorBot CKEditorBot added this to the iteration 56 milestone Aug 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@oleq oleq

Labels
domain:accessibility This issue reports an accessibility problem. package:theme-lark squad:features Issue to be handled by the Features team. type:bug This issue reports a buggy (incorrect) behavior.
Projects
None yet
Milestone
iteration 56 (v35.1.0)
Development

Successfully merging a pull request may close this issue.

Changed the color of the text (icon) of an active button to improve contrast ckeditor/ckeditor5
8 participants
@wimleers @Reinmar @Comandeer @oleq @pomek @mlewand @CKEditorBot @mmotyczynska