Skip to content

css(add): contrast-color() function page #39847

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 8 commits into from
Jun 12, 2025
Merged

css(add): contrast-color() function page #39847

merged 8 commits into from
Jun 12, 2025

Conversation

OnkarRuikar
Copy link
Contributor

Description

Add contrast-color() function page.

Motivation

The feature is in Safari Technology Preview now.

Additional details

The function is completely different now from the original color-contrast() function. The current version is simple, accepting only one parameter and returning only two possible values.

Related issues and pull requests

@OnkarRuikar OnkarRuikar requested review from a team as code owners June 7, 2025 09:35
@OnkarRuikar OnkarRuikar requested review from estelle and chrisdavidmills and removed request for a team June 7, 2025 09:35
@github-actions github-actions bot added Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed labels Jun 7, 2025
@OnkarRuikar OnkarRuikar mentioned this pull request Jun 7, 2025
Closed
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 7, 2025 •
edited
Loading

Preview URLs

External URLs (3)

URL: /en-US/docs/Web/CSS/color_value/contrast-color
Title: contrast-color()

(comment last updated: 2025-06-12 02:12:11)

Josh-Cena
Josh-Cena reviewed Jun 7, 2025
View reviewed changes
Copy link
Member

@Josh-Cena Josh-Cena left a comment

Choose a reason for hiding this comment

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

I'm surprised they went with this design, because there are a lot of designs that don't use plain-white or black text.

Josh-Cena
Josh-Cena reviewed Jun 7, 2025
View reviewed changes
@OnkarRuikar
Copy link
Contributor Author

OnkarRuikar commented Jun 7, 2025 •
edited
Loading

I'm surprised they went with this design, because there are a lot of designs that don't use plain-white or black text.

They are waiting for the contrast algorithm to get better. There are numerous complaints about it. After that, it'll be easy to expand to more than black and white colors.

@Josh-Cena In the article, they say TP, but the version is not mentioned. The latest TP version should have the feature, right?
Mind got stuck on color-contrast, it's hard to imprint contrast-color easily :( Did you try the contrast-color() on the latest TP?

Edit: Josh confirmed it works in TP Safari.

@chrisdavidmills chrisdavidmills removed their request for review June 8, 2025 13:47
chrisdavidmills
chrisdavidmills requested changes Jun 10, 2025
View reviewed changes
Copy link
Contributor

@chrisdavidmills chrisdavidmills left a comment

Choose a reason for hiding this comment

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

Nice work @OnkarRuikar! I've made some comments for you to look over.

chrisdavidmills
chrisdavidmills requested changes Jun 11, 2025
View reviewed changes
Copy link
Contributor

@chrisdavidmills chrisdavidmills left a comment

Choose a reason for hiding this comment

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

@OnkarRuikar a few more comments for you, but we're very close now!

chrisdavidmills
chrisdavidmills approved these changes Jun 12, 2025
View reviewed changes
Copy link
Contributor

@chrisdavidmills chrisdavidmills left a comment

Choose a reason for hiding this comment

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

Nice work @OnkarRuikar; I think this is ready to merge now.

@chrisdavidmills chrisdavidmills merged commit 5e5712b into mdn:main Jun 12, 2025
8 checks passed
@OnkarRuikar OnkarRuikar deleted the css-contrast-color branch June 12, 2025 06:21
hamishwillee pushed a commit to yoavweiss/content that referenced this pull request Jun 24, 2025
@OnkarRuikar @Josh-Cena
@chrisdavidmills @hamishwillee
css(add): contrast-color() function page (mdn#39847)
97789d7 
* css(add): contrast-color() function page

* Apply suggestions from code review

* remove livesample markers

* add color picker to the example

* add prefers-color-scheme example

* Apply suggestions from code review

Co-authored-by: Chris Mills <[email protected]>

* move extra content to the description section

* Apply suggestions from code review

Co-authored-by: Chris Mills <[email protected]>

---------

Co-authored-by: Joshua Chen <[email protected]>
Co-authored-by: Chris Mills <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Josh-Cena Josh-Cena Josh-Cena left review comments

@chrisdavidmills chrisdavidmills chrisdavidmills approved these changes

@estelle estelle Awaiting requested review from estelle estelle is a code owner automatically assigned from mdn/yari-content-css

Assignees
No one assigned
Labels
Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@OnkarRuikar @chrisdavidmills @Josh-Cena