Skip to content

Improve contrast ratio in annotation textarea#6966

Merged
acelaya merged 1 commit into
mainfrom
darker-textarea-color
Apr 9, 2025
Merged

Improve contrast ratio in annotation textarea#6966
acelaya merged 1 commit into
mainfrom
darker-textarea-color

Conversation

@acelaya
Copy link
Copy Markdown
Contributor

@acelaya acelaya commented Apr 8, 2025

As part of #6866, and following #6866 (comment), this PR updates the text color and placeholder color in the annotation textarea to darker shades of grey:

  • grey-6 (#737373) for placeholder.

    I originally recommended #767676, but the difference is hard to notice, so using grey-6 we avoid having to define a new color.

  • grey-9 (#202020) for the text, via inheriting the page color, as the rest of the inputs do.

This PR does not cover changing this anywhere other than the annotation textarea. I'll prepare follow-up PRs to update the defaults in the shared library and other projects.

Before:
Captura desde 2025-04-08 15-17-01
Captura desde 2025-04-08 15-17-07

After:
Captura desde 2025-04-08 15-16-10
Captura desde 2025-04-08 15-16-19

@acelaya acelaya requested a review from robertknight April 8, 2025 13:17
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 8, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.44%. Comparing base (a1f38f3) to head (bc57280).
Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6966   +/-   ##
=======================================
  Coverage   99.44%   99.44%           
=======================================
  Files         275      275           
  Lines       10906    10906           
  Branches     2631     2631           
=======================================
  Hits        10846    10846           
  Misses         60       60           

☔ View full report in Codecov by Sentry.
📢 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.

@robertknight
Copy link
Copy Markdown
Contributor

Slack discussion

Copy link
Copy Markdown
Contributor

@robertknight robertknight left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This direction looks good to me, assuming we roll out a consistent change in our component library.

@acelaya
Copy link
Copy Markdown
Contributor Author

acelaya commented Apr 8, 2025

This direction looks good to me, assuming we roll out a consistent change in our component library.

I'll wait to merge this to have the change in the shared library ready. That way we can roll both changes out at the same time.

@acelaya acelaya force-pushed the darker-textarea-color branch from 294b6b7 to bc57280 Compare April 9, 2025 09:04
className={classnames(
'border rounded p-2',
'text-color-text-light bg-grey-0',
'placeholder:text-grey-6 bg-grey-0',
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Inherit default text color (grey-9) and set a dark-enough placeholder color that has enough contrast with white backgrounds.

@acelaya acelaya merged commit 49f6218 into main Apr 9, 2025
4 checks passed
@acelaya acelaya deleted the darker-textarea-color branch April 9, 2025 09:12
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