This sample demonstrates how a developer can use the new CSS High Contrast Media Query, CSS High Contrast Adjust property, CSS System Color key words, and SVG to implement a custom control that has High Contrast compliant complex visuals.

Please place the system into High Contrast Mode.

Not High Contrast Aware Custom Button with SVG Background Image

Detected High Contrast, but SVG content is not High Contrast

Detected High Contrast, and SVG content is High Contrast


/*
THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.

Copyright (c) Microsoft Corporation. All rights reserved
*/

/* styles */
.s2-grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
}

.s2-column-1 {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    margin: 20px;
}

.s2-column-2 {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    margin: 20px;
}

.s2-column-3 {
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    margin: 20px;
}

.s2-button {
    background-image: url(../button-not-aware.svg);
    background-size: 100% 100%;
    width: 200px;
    height: 200px;
}

.s2-button-hc-bg-svg {
    background-image: url(../button-not-aware.svg);
    background-size: 100% 100%;
    width: 200px;
    height: 200px;
}

@media (-ms-high-contrast) {
    .s2-button-hc {
        background-image: url(../button-not-aware.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .s2-button-hc-bg-svg {
        background-image: url(../button.contrast-high.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }
}