Skip to content

Port newer color readability functions from TinyColor#6681

Merged
artf merged 2 commits intoGrapesJS:devfrom
DavidHarvey:tinycolor-readability
Mar 31, 2026
Merged

Port newer color readability functions from TinyColor#6681
artf merged 2 commits intoGrapesJS:devfrom
DavidHarvey:tinycolor-readability

Conversation

@DavidHarvey
Copy link
Copy Markdown
Contributor

The "port" of TinyColor is either old, or modified, such that readability methods return unexpected results. This simply ports the latest readability methods (and necessary complementary methods, like getLuminance).

As an example, take the background color #0066cc and the foreground color #fff. This combination passes all WCAG contrast checks, except for AAA on normal sized text (See: https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=0066CC)

Before:

-> tinycolor.isReadable('#0066cc', '#fff')
<- false

After:

-> tinycolor.isReadable('#0066cc', '#fff')
<- true

-> tinycolor.isReadable('#0066cc', '#fff', {level: 'AAA', size: 'small'})
<- false

@artf
Copy link
Copy Markdown
Member

artf commented Mar 31, 2026

Thanks @DavidHarvey 🙏

@artf artf merged commit bf8b3df into GrapesJS:dev Mar 31, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants