Content
Updated by Parimal Satyal 2 days ago
### Steps to reproduce
1. Open a work package description
2. In the CKEditor, click some buttons in the toolbar, like "Bold" or "Bullet list"
### What is the buggy behavior?
* In light mode and light mode high contrast, the contrast is low between the light blue background and the white background (in light mode)
* foreground is #F0F7FF, background is #FFFFFF, contrast ratio is **1.1:1**
* It fails 1.4.11 AA Non-text contrast (at least 3:1 required)
* In dark mode, the contrast is low too between the dark background and the lighter dark of the selected icon background
* foreground is #2A303C, background is #0D1117, contrast ratio is **1.4:1**
* It fails 1.4.11 AA Non-text contrast (at least 3:1 required)
### What is the expected behavior?
* Replace active colour (when on) with `--control-transparent-bgColor-active`
* In light mode, this colour (#818B98) has a contrast ratio of **3.45**:1 against the white background and **5.66**:1 with the dark grey icon colour.
* In dark mode, this colour (#656C76) has a contrast ratio of **3.56**:1 against the dark background, and **4.87**:1 with the light grey icon colour.
#### **WCAG Requirements:**
* 1. Pass WCAG 1.4.11 Non-text Contrast AA:
* 1. The visual presentation of user interface components (their states, including focus indication, and boundaries) and graphical objects has a contrast ratio of at least **3:1** against adjacent colour(s).
### Screenshots and other files
Light mode
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/711248/content">
Light mode high contrast
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/711250/content">
Dark mode
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/711245/content">
### Environment information
**OpenProject version**
16.1
**Browser**
* [x] Chrome
* [x] Firefox
* [ ] Safari
* [ ] Mobile Safari
* [ ] Other (please specify)
**Operating System**
* [ ] Windows
* [x] Mac OS X
* [ ] Mobile iOS
* [ ] Mobile Android
* [ ] Linux (please specify distro)
* [ ] Chrome OS
* [ ] Other (please specify)
1. Open a work package description
2. In the CKEditor, click some buttons in the toolbar, like "Bold" or "Bullet list"
### What is the buggy behavior?
* In light mode and light mode high contrast, the contrast is low between the light blue background and the white background (in light mode)
* foreground is #F0F7FF, background is #FFFFFF, contrast ratio is **1.1:1**
* It fails 1.4.11 AA Non-text contrast (at least 3:1 required)
* In dark mode, the contrast is low too between the dark background and the lighter dark of the selected icon background
* foreground is #2A303C, background is #0D1117, contrast ratio is **1.4:1**
* It fails 1.4.11 AA Non-text contrast (at least 3:1 required)
### What is the expected behavior?
* Replace active colour (when on) with `--control-transparent-bgColor-active`
* In light mode, this colour (#818B98) has a contrast ratio of **3.45**:1 against the white background and **5.66**:1 with the dark grey icon colour.
* In dark mode, this colour (#656C76) has a contrast ratio of **3.56**:1 against the dark background, and **4.87**:1 with the light grey icon colour.
#### **WCAG Requirements:**
*
*
### Screenshots and other files
Light mode
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/711248/content">
Light mode high contrast
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/711250/content">
Dark mode
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/711245/content">
### Environment information
**OpenProject version**
16.1
**Browser**
* [x] Chrome
* [x] Firefox
* [ ] Safari
* [ ] Mobile Safari
* [ ] Other (please specify)
**Operating System**
* [ ] Windows
* [x] Mac OS X
* [ ] Mobile iOS
* [ ] Mobile Android
* [ ] Linux (please specify distro)
* [ ] Chrome OS
* [ ] Other (please specify)