Forms: Fix checkbox checkmark border color for better contrast

[CGastrell]

Part of FORMS-437

Proposed changes:

• Changed checkbox checkmark border color from inverted-text-color to text-color for better contrast with input backgrounds
• Fixed consent checkbox positioning to maintain proper centering and rotation when scaled
• Removed unused background-color rule that was causing checkboxes to inherit currentColor incorrectly
• Added clarifying comment that --jetpack--contact-form--inverted-text-color is fixed to white, not truly inverted

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

p1764251172431619-slack-C052XEUUBL4

Does this pull request change what data or activity we track or use?

No

Testing instructions:

• Create a new post or page with the Jetpack Contact Form block
• Add checkbox fields to the form using the Checkbox Group style (list style)
• Also add a consent checkbox
• Change the theme to one with a light background for input fields
• Verify that the checkmark inside checked checkboxes is visible and has good contrast
• Test with different themes that have different input background colors
• Verify that the consent checkbox checkmark appears properly centered when checked
• Before this fix, the checkmark border color would match the inverted text color (white), making it invisible on light input backgrounds
• After this fix, the checkmark border color matches the text color, ensuring it's always visible

Before / After:

• Before: Checkmark was white on white background (invisible)
• After: Checkmark uses text color, ensuring proper contrast with input background

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the fix/form-checkboxes-colors branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack fix/form-checkboxes-colors

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

---

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

• WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
• WoA releases happen weekly.
• Releases to self-hosted sites happen monthly:
  • Scheduled release: December 2, 2025

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[jp-launch-control]

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

_{Coverage check overridden by Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR .}

[enejb]

This seems to be different from the current one.

translate(-50%, -60%) rotate(40deg); is that intended?

[CGastrell]

This seems to be different from the current one.

Which current one?

[enejb]

This PR works well but it also change the style of the checkbox to appear differently.

Before:

After:

The previous version is more as designed. cc @ilonagl and @ederrengifo for the feedback here.

[CGastrell]

The previous version is more as designed. cc @ilonagl and @ederrengifo for the feedback here.

Would be nice to do a full revisit to what's the expected design on each case, with an atomic approach to:

• background
• border
• checkmark style
• checkmark color
• label color

And how those relate to other inputs (including buttons) styling. Once we establish a pattern/strategy/approach/system, we should be able to find a more common ground for all those, not to mention not having to ask every single time "how should this look on frontend?".

Then put it to the test against multiple themes and see how we can allow for consistent overrides from the themes. We shouldn't change the entire style so to fit the need of a single theme, IMHO.

In the meantime, this PR aims to settle for what's the most wide/safe solution in terms of legibility, but might not be enough for the desired effect/design.

[ilonagl]

@ederrengifo remember this work on unifying checkboxes that you some months ago? 😄 Do you want to take a look at this? If you're busy, no worries, I can do that too.