# Feature DREAM-952 - Preview highlighting colors and check contrast

Project: Stream Design System
Status: merged
URL: https://community.openproject.org/work_packages/DREAM-952

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 18.0.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List | a11y report 2026 |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Administration, Accessibility, Frontend components and Primer design system |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan | Community (COM) |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Accessibility | Yes |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Behrokh Satarnejad |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**As an** OpenProject administrator  
**I want to** preview how the highlighting system renders a color in light and dark modes and check its contrast  
**so that** I can assess the readability of its actual text and background appearances before saving it.

### Acceptance criteria

*   Contrast previews are available on the **New Color** and **Edit Color** forms.
    
*   Previews update automatically when a valid Hex code is typed or selected using the color picker. No separate Check contrast button is required.
    
*   Opening an existing color displays its previews automatically.
    
*   Incomplete or invalid input hides previous previews. Inline validation errors appear when the user leaves the field or submits the form.
    
*   The preview appears to the right of the inputs on wide screens and below them on narrow screens.
    
*   A short explanation describes where highlighting colors are used.
    
*   Four previews are displayed, grouped into **Light mode** and **Dark mode**, showing foreground and background usage.
    
*   Previews use the application’s existing highlighting styles and actual standard theme surfaces. Both themes are shown independently of the administrator’s active theme, without changing the surrounding interface.
    
*   Each preview displays the rendered text and effective background Hex values and the calculated contrast ratio.
    
*   Results are evaluated against **WCAG AA for normal text**:
    
    *   **Pass**, with a green icon, for ratios of at least **4.5:1**.
        
    *   **Fail**, with a red icon, for ratios below **4.5:1**.
        
*   Color labels and values have an accessible semantic association.
    
*   After an unsuccessful form submission, previews are restored automatically when the retained Hex code is valid.
    
*   Failed contrast checks do not prevent saving an otherwise valid color.
    

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/926313/content">

### WCAG reference

[WCAG 1.4.3 — Contrast (Minimum), Level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html). Results evaluate normal-text contrast for the displayed highlighting combinations.