TypeCellOS / TypeCellOS/BlockNote
Improve color palette accessibility
Personne n'a encore pris cette issue.
- Langage dominant
- TypeScript
- Étoiles
- 10.2k
- Forks
- 772
- Merge moyen
- 3 j 11 h
- PR mergées (30 j)
- 17
Description
Discussed in https://github.com/TypeCellOS/BlockNote/discussions/2768
Originally posted by Ovgodd May 22, 2026
Feature Request
Hello, I'm opening a discussion about color accessibility in BlockNote. This came up during an accessibility audit of Docs (La Suite).
Audited document:
https://docs.numerique.gouv.fr/docs/0d998bef-1b69-47ce-bd18-83d4d849c734/
Is your feature request related to a problem or unsupported use case? Please describe.
The audit asks: should Docs guarantee contrast for any color a user might use?
The answer is usually no, if users could pick anything.
The real issue is not "let users pick safe colors". It's "don't offer colors in that list that break the contrast ratio".
BlockNote color palette
Right now several of those presets fail WCAG AA in common cases. The fix the audit points to is to restrict it, remove or adjust swatches that don't pass, and only show options that work for their intended use (text vs highlight background).
If custom colors are supported, the editor could also provide an accessible warning when the selected color does not meet contrast requirements.
For example, the warning should be announced to assistive technologies using an appropriate live region.
Contrast issues we found
We checked ratios against WCAG AA (4.5:1 for normal text).
Light mode, text color on white (#FFFFFF)
| Color | Ratio | Result |
|---|---|---|
| yellow | 2.11 | Fail |
| gray | 2.81 | Fail |
| orange | 3.28 | Fail |
| red | 4.26 | Borderline (ok for large text only) |
| brown, green, blue, purple, pink | 5.6 to 8.4 | Pass |
Light mode, default editor text (#3F3F3F) on highlight background
Background-only use looks fine. Everything we tested was above 8:1.
Dark mode, text color on editor background (#1F1F1F)
| Color | Ratio | Result |
|---|---|---|
| purple | 3.29 | Fail |
| brown | 3.24 | Fail |
| pink | 3.60 | Fail |
| blue | 4.09 | Fail |
| green | 4.45 | Fail |
| red | 4.22 | Fail |
| gray, yellow, orange | above 5.5 | Pass |
Dark mode, default editor text (#CFCFCF) on highlight background
| Color | Ratio | Result |
|---|---|---|
| gray | 1.81 | Fail |
| yellow | 2.02 | Fail |
| orange | 2.87 | Fail |
| red | 3.61 | Fail |
| blue | 3.64 | Fail |
| brown, purple, pink | 4.3 to 5.4 | Borderline |
Text + background from the same family
If someone sets both (e.g. red text on red background), it gets worse:
| Color | Ratio | Result |
|---|---|---|
| yellow | 1.90 | Fail |
| gray | 2.38 | Fail |
| orange | 2.74 | Fail |
| red | 3.51 | Fail |
From the audit (table cells):
Ratio 3.53 - #E03E3E on #DDEDEA
Ratio 4.26 - #E03E3E on #FFFFFF
Describe the solution you'd like
Restrict the default palette so users can only pick colors that meet contrast requirements. No new free-form color picker needed.
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Start by locating BlockNote's default color palette and the code that applies text and highlight colors in light and dark modes. Check how palette options are tested, then restrict or adjust swatches to meet the stated WCAG AA contrast requirements for their intended use; done means failing default options are no longer offered.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react, typescript
- Domaine
- accessibility, frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- Calme
- Clarté
- Plutôt claire
- Accessibilité débutants
- 52/100