Text in HTML Buttons is blue on iOS 15
when it should be black
Did you explicitly set the color ?
Yep, you're right that was the problem. Thank you so much!
I too am having this issue since I upgraded a few days ago. All of my php/html apps buttons are showing bright blue backgrounds which I certainly did not program. Why is this happening?
Also having this issue. SOME buttons are appearing blue even though the CSS is explicitly setting a colour. Only affects iOS15 devices. Have tested on Chrome and on Safari and it is the same.
I'm wondering if the CSS is not specific enough and you may have to target the button element directly rather than using a class name...but..it's really tricky to debug...
It might also be affecting specific HTML structures...we have a component which has a button wrapped in an H4 which is being affected.
All other buttons are fine though.
I was also having this issue, and tried to use Safari developer tool to see website inspector element.
Found <button> color style use “-apple-system-blue”, if there were only color on <body> or not set anything.
So I set simple style in common CSS file, it could solve this problem:
button {
color: #000;
}
BTW, I find someone who use all elements selector “*” to solve it.
html {
* {
color: #000000;
}
}
The selector range is too large, and specificity is too high. I think it is not good way for my project.
Reference article:
(Korean language)iOS-15%EC%97%90%EC%84%9C-button-text-color%EA%B0%80-blue%EB%A1%9C-%EB%B0%94%EB%80%8C%EB%8A%94-%EB%AC%B8%EC%A0%9C
* I can't use anchor link, because this forum is not permitted. Use online decode tool and google it.
And in general, this problem is really tricky. If developers didn’t set button color on (old) project. It will show “apple system blue” on iOS 15.
Well at last an explanation for why my apps are all f... up. Why in hell does apple think that buttons should be blue? We write apps and design them our way and Apple steps up and changes that. Who do they think they are - Micro$oft???
Just wanna chime in here that the color value for --apple-system-blue is just barely sufficient for WCAG/Section 508 contrast requirements (it fails for small text under AA criteria)--assuming a white background. Apple has to know that this default value for button color will likely trigger accessibility errors on websites--and they can't realistically anticipate background colors designers may have chosen. Why, Apple?--why would you do this? You guys have some pretty awesome concessions for accessibility? This seems counter intuitive to your overall strategy.