Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Improve color palette accessibility

オープン
#2,852 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
52/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
静か
技術スタック
react, typescript

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

a11y
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.

主要言語
TypeScript
スター
10.2k
フォーク
772
平均マージ
6日 6時間
マージ済み PR(30日)
25

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

TypeCellOS/BlockNote のほかの issue

TypeCellOS/BlockNote の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。