MaibornWolff / MaibornWolff/codecharta

Improve Accessibility by increasing contrast

Open
#3,056 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

difficulty:low pr-visualization priority:medium UX / UI
Dominant language
TypeScript
Stars
529
Forks
56
Avg merge
7h 17m
Merged PRs (30d)
34

Description

# Feature request

## Description

As a user with limited eyesight, I want all CodeCharta icons, text and menus to be readable and with enough contrast (WCAG AAA) so that I can see something and use the software without hassle.

## Acceptance criteria
- Text and icons (in menus) have enough contrast on their backgrounds, preferably WCAG AAA. It can be e.g. checked with https://webaim.org/resources/contrastchecker/
- All colours in all places are the same.
-

## Assumptions & Exclusions
The general design might need to be updated in some places, the default sea-green that we currently use (#009688) as a background colour, together with white text does not satisfy WCAG standards for regular text at all.

## Screenshots
![grafik](https://user-images.githubusercontent.com/108457762/212282504-babfc7eb-5b67-4bc9-b944-bc6b86ba4731.png)

https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=009688

## Development notes (optional Task Breakdown)
- [ ]
- [ ]
- [ ]

## Open questions

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files or tests are named. Start by locating the CodeCharta UI styles and inventorying the documented #009688 background with white text using the linked WebAIM contrast checker. Done means all icons, text, and menus meet the chosen WCAG contrast target and colors are consistent throughout the application.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.