themesberg / themesberg/flowbite-react
Accessibility: Dark mode table header cells lack sufficient color contrast (4.05)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.1k
- Forks
- 506
- PR merge metrics
- No merged PRs in 30d
Description
- I have searched the Issues to see if this bug has already been reported
- I have tested the latest version
Steps to reproduce
- Go to https://www.flowbite-react.com/docs/components/table
- Turn on dark mode
- Open dev tools
- Inspect table header cells
Current behavior
The current table component headers cells use dark:text-gray-400 on top of dark:bg-gray-700.
Expected behavior
Accessibility standards for table headers pass AA standards.
Context
If the text us updated to use dark:text-gray-300 the result is 6.99 ratio passing accessibility standards.
If possible, provide a live example URL, screenshot, video, or a repository with the minimal reproduction of the issue.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the table component entry point linked from the Flowbite React table documentation and inspect the dark-mode header-cell classes. Update the header text styling so its contrast against the dark background passes AA, then verify the rendered table and contrast ratio.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100