Skip to content

Raise the contrast of form fields, list numbers, the calendar and outline hover - #147

Merged
MaggieCabrera merged 1 commit into
trunkfrom
claude/peaceful-bardeen-eb75d3
Oct 10, 2026
Merged

MaggieCabrera merged 1 commit into
trunkfrom
claude/peaceful-bardeen-eb75d3

Conversation

@MaggieCabrera

@MaggieCabrera MaggieCabrera commented Oct 8, 2026 •

Copy link
Copy Markdown
Contributor

Description

Part of #44. Five things in the theme's styles fell below the WCAG AA contrast minimums in most color variations. This raises them:

  • Form field borders (comment form, search, Jetpack form) go from theme-4 to theme-2, and to theme-6 on hover. They were 1.5–2:1, and need 3:1. They're now 5.85:1 or more.
  • The search placeholder goes from 0.6 to 0.9 opacity. It was 2.7–3.8:1, and needs 4.5:1. It's now 4.99:1 or more, and still lighter than typed text.
  • Ordered list numbers use the text color instead of theme-4, which was 1.5–2:1. Bullets stay faint, since they don't carry information.
  • The calendar's weekday row sits on theme-5 instead of theme-4, like table headers. It was 3.87:1 in After Hours.
  • The outline button's hover text goes to theme-6, like links. On a theme-5 surface in After Hours it was 4.32:1, and it's now 9.27:1.

The black-on-black "Large title" pattern (#46) is a bug in the core pattern, so it's fixed upstream in WordPress/wordpress-develop#13793 (Trac #66201) and this PR doesn't touch it.

Screenshots

Before After
Comment form, Default Comment form, Default, before Comment form, Default, after
Comment form, After Hours Comment form, After Hours, before Comment form, After Hours, after
Search results, Default Search field, Default, before Search field, Default, after
Search results, Sunrise Search field, Sunrise, before Search field, Sunrise, after
CTA Search, Default CTA Search pattern, Default, before CTA Search pattern, Default, after
CTA Search, Golden Hour CTA Search pattern, Golden Hour, before CTA Search pattern, Golden Hour, after
Ordered list, Default Ordered list, Default, before Ordered list, Default, after
Ordered list, Evening Ordered list, Evening, before Ordered list, Evening, after
Calendar, After Hours Calendar, After Hours, before Calendar, After Hours, after
Calendar, Default Calendar, Default, before Calendar, Default, after
CTA Membership "View plans" on hover, After Hours View plans button on hover, After Hours, before View plans button on hover, After Hours, after
Core "Large title" pattern with WordPress/wordpress-develop#13793, Default (not part of this PR) Large title pattern, Default, before Large title pattern, Default, after

Testing Instructions

  1. Import the accessibility test content.
  2. Open "Template: Comments", search for nothing (/?s=), and open "WP 6.1 Text category blocks" and "WP 6.1 Widgets block category". Field borders and the placeholder are easy to see, list numbers match the text, and the calendar's weekday row reads well.
  3. Insert the CTA Search and CTA Membership patterns in a page.
  4. Switch to After Hours in Styles and hover "View plans" in CTA Membership. The text stays readable.
  5. Repeat with Sunrise and Evening, and check the same pages in the Site Editor.

I checked the front end and the Site Editor in all eight color variations, measuring every text, border and button state on those pages and on a page with all of Ipsum's and core's patterns.

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5.5
Used for: Auditing contrast across the color variations, implementing the change and taking the screenshots.

🤖 Generated with Claude Code

…line hover

Form field borders, ordered list numbers and the calendar's weekday row
used the faint theme-4 color, and the search placeholder sat at 0.6
opacity, all below WCAG AA in most color variations. The outline
button's hover text moves to theme-6 so it stays readable on a theme-5
surface in After Hours.

Part of #44.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions github-actions Bot added the [Area] Global Styles Issues or PRs that touch theme.json or the base stylesheet. label Oct 8, 2026
@MaggieCabrera

Copy link
Copy Markdown
Contributor Author

@henriqueiamarino if you could have a look to check on these changes, since we are making color changes?

@MaggieCabrera
MaggieCabrera marked this pull request as ready for review October 8, 2026 17:15
@github-actions

github-actions Bot commented Oct 8, 2026 •

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: henriqueiamarino <iamarinoh@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@henriqueiamarino

Copy link
Copy Markdown
Contributor

Hey @MaggieCabrera, the changes hurt the default style a bit, but I believe they benefit the others a lot. With that, we can proceed with the changes.

@MaggieCabrera
MaggieCabrera merged commit 915b357 into trunk Oct 10, 2026
9 checks passed
@MaggieCabrera
MaggieCabrera deleted the claude/peaceful-bardeen-eb75d3 branch October 10, 2026 15:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Area] Global Styles Issues or PRs that touch theme.json or the base stylesheet.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants