---
title: "High contrast animated icon"
description: "High contrast animated icon (Accessibility & reading). The contrast dial flips. Light: the dark half winds back a touch, then sweeps one full clockwise turn through the inverted split and locks home with a hit and a small rebound. Strong: a deeper wind-up, the half snaps over to the inverted side and holds there a beat (light and dark swapped), then completes the turn, overshoots and settles. The ring never moves; the turn ends on the starting angle."
canonical: https://generativeicons.com/icons/high-contrast/
---

# High contrast animated icon

The contrast dial flips. Light: the dark half winds back a touch, then sweeps one full clockwise turn through the inverted split and locks home with a hit and a small rebound. Strong: a deeper wind-up, the half snaps over to the inverted side and holds there a beat (light and dark swapped), then completes the turn, overshoots and settles. The ring never moves; the turn ends on the starting angle.

- Id: `high-contrast`
- Category: Accessibility & reading
- Search terms: invert colors, invert colours, color inversion, colour inversion, increase contrast, contrast mode, black and white, legibility, contrast ratio
- One action, back to rest
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/high-contrast.lottie (dotLottie, 2911 bytes, sha256 396a4b392d381154fc7ada7c60907e384687f3d916bd0186873d6a9caa5f193e)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add high-contrast
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/high-contrast.mjs';

export function HighContrastIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/high-contrast.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/high-contrast/ · https://generativeicons.com/api/icons/high-contrast