Skip to content

🐛 Fixed contrast_text_color returning incorrect text color for some light backgrounds - #29834

Merged
9larsons merged 6 commits into
TryGhost:mainfrom
eojuma:fix/contrast-text-color-yiq
Aug 10, 2026
Merged

🐛 Fixed contrast_text_color returning incorrect text color for some light backgrounds#29834
9larsons merged 6 commits into
TryGhost:mainfrom
eojuma:fix/contrast-text-color-yiq

Conversation

@eojuma

@eojuma eojuma commented Aug 9, 2026

Copy link
Copy Markdown

Summary

Fixes {{contrast_text_color}} and every other Ghost consumer of textColorForBackgroundColor returning white for light colors such as #dacafe, #ffa5b1, and #a3e6ff.

Root cause

@tryghost/color-utils@0.2.19 used .b() in its YIQ calculation. That accessor is the Lab b-channel, not the RGB blue channel, so many colors were classified incorrectly.

Changes

  • Bumps @tryghost/color-utils to the corrected 0.2.20 release from Use .blue() instead of .b() in textColorForBackgroundColor SDK#1031.
  • Keeps contrast_text_color delegating to the shared color utility so Core, Admin, Ember Admin, and Koenig use the same implementation.
  • Adds regression coverage for the reported light colors.
  • Preserves the shared YIQ cutoff with a mid-tone regression case.
  • Adds patch changesets for the affected Koenig packages.

Validation

  • pnpm install --frozen-lockfile
  • Four direct contrast checks against the installed @tryghost/color-utils@0.2.20
  • pnpm exec vitest run test/unit/frontend/helpers/contrast-text-color.test.js test/unit/server/services/email-rendering/email-design.test.js — 75 tests passed
  • ESLint passed for the changed helper and test
  • pnpm nx run @tryghost/admin:build passed, including Ember Admin and Koenig dependencies

Fixes #27797

Checklist

  • I have read and followed the Contributor Guide
  • I have explained my change
  • I have written automated regression coverage
  • I have run relevant tests, lint, and builds locally
  • I have added the required changeset

fixes TryGhost#27797

Use YIQ luminance from Color(...).rgb() to decide black vs white for contrast; added regression tests for reported light colors.
@coderabbitai

coderabbitai Bot commented Aug 9, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Walkthrough

The pull request adds tests for black contrast text on three light backgrounds and white contrast text on a mid-tone background. It updates the workspace catalog to @tryghost/color-utils version 0.2.20. It also adds patch release entries for @tryghost/kg-default-nodes and @tryghost/koenig-lexical.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The dependency update and regression tests address issue #27797 by correcting contrast colors for light backgrounds.
Out of Scope Changes check ✅ Passed The dependency update, regression tests, and related changeset support the stated contrast color fix.
Title check ✅ Passed The title clearly summarizes the primary change: correcting contrast text colors for light backgrounds.
Description check ✅ Passed The description directly explains the contrast color fix, root cause, changes, regression tests, and validation.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@nx-cloud

nx-cloud Bot commented Aug 10, 2026

Copy link
Copy Markdown

🤖 Nx Cloud AI Fix

Ensure the fix-ci command is configured to always run in your CI pipeline to get automatic fixes in future runs. For more information, please see https://nx.dev/ci/features/self-healing-ci


View your CI Pipeline Execution ↗ for commit e76a291

Command Status Duration Result
nx run ghost:test:ci:integration ✅ Succeeded 2m 18s View ↗
nx run @tryghost/admin:test:acceptance ✅ Succeeded 7m 15s View ↗
nx run-many -t test:unit -p ghost,@tryghost/ada... ✅ Succeeded 6m 8s View ↗
nx run ghost:test:integration ✅ Succeeded 3m 5s View ↗
nx run ghost-monorepo:lint:boundaries ✅ Succeeded 23s View ↗
nx run-many -t lint -p ghost-monorepo,ghost,@tr... ✅ Succeeded 3m 47s View ↗
nx run ghost:test:legacy ✅ Succeeded 3m 2s View ↗
nx run ghost-admin:test ✅ Succeeded 3m 30s View ↗
Additional runs (9) ✅ Succeeded ... View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗


☁️ Nx Cloud last updated this comment at 2026-08-10 19:21:06 UTC

ref TryGhost#27797

Preserved the shared color utility's established threshold while correcting the blue-channel calculation.
fixes TryGhost#27797

Applied the upstream blue-channel correction centrally so Core, Admin and Koenig continue sharing one contrast implementation.
ref TryGhost#27797

The temporary @tryghost/color-utils patch only covered the CJS, ES, and TypeScript sources, leaving browser consumers and debugging metadata on the faulty blue-channel accessor. Including the generated UMD bundle and source maps keeps every shipped entry point consistent until the upstream package release is available.
ref TryGhost#27797

The temporary dependency patch only needs to correct the CJS and ES entry points used by Ghost, with the TypeScript source retained for readable package debugging. Excluding the unconsumed UMD bundle and generated source maps keeps the repository patch reviewable and reduces it from 538 KB to 1.7 KB without changing runtime coverage.
fixes TryGhost#27797

@tryghost/color-utils 0.2.20 contains the corrected RGB blue-channel calculation, allowing every Ghost surface to use the supported shared release instead of a temporary dependency patch.
@codecov

codecov Bot commented Aug 10, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.45%. Comparing base (5406605) to head (e76a291).
⚠️ Report is 25 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #29834      +/-   ##
==========================================
+ Coverage   75.40%   75.45%   +0.04%     
==========================================
  Files        1606     1605       -1     
  Lines      140381   140484     +103     
  Branches    17389    17429      +40     
==========================================
+ Hits       105860   106004     +144     
+ Misses      33444    33432      -12     
+ Partials     1077     1048      -29     
Flag Coverage Δ
admin-tests 55.97% <ø> (ø)
e2e-tests 77.60% <ø> (+0.05%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@9larsons
9larsons merged commit 4b95c4c into TryGhost:main Aug 10, 2026
54 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.

{{contrast_text_color}} helper returns incorrect text color

2 participants