css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Forked from Eric Bailey's pen for this article: https://css-tricks.com/accessible-svgs-high-contrast-mode/

Changed to use CSS system color keywords to access the exact button colors used in the high contrast theme.

However, all the default themes in Windows use the same color for button backgrounds as they do for the page background. This makes the button not very obvious, as Eric noted in his article, if you just let default colors apply. I've adapted for that by adding a border on all sides of the button, so it looks more like other buttons in the application.

This is what it looks like in action:

Animated GIF of the CodePen editor window, and the Windows High Contrast settings dialog, showing the effect as a dark high-contrast theme is switched to a light high-contrast theme, then a custom theme, and then high-contrast mode is turned off

This Pen is a fork of Eric Bailey's Pen SVG Manipulation via CSS: High Contrast Mode SVGs.


  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.