---
title: "Liquid filters: brightness_difference"
description: Calculates the [perceived brightness difference](https://www.w3.org/WAI/ER/WD-AERT/#color-contrast) between two colors.
api_name: liquid
source_url:
  html: https://shopify.dev/docs/api/liquid/filters/brightness_difference?itcat=partner_blog&itterm=deprecating_sass
  md: https://shopify.dev/docs/api/liquid/filters/brightness_difference.md?itcat=partner_blog&itterm=deprecating_sass
---

# brightness\_​difference

```oobleck
string | brightness_difference: string
```

returns [number](https://shopify.dev/docs/api/liquid/basics#number)

Calculates the [perceived brightness difference](https://www.w3.org/WAI/ER/WD-AERT/#color-contrast) between two colors.

***

Tip

For accessibility best practices, it's recommended to have a minimum brightness difference of 125.

***

```liquid
{{ '#E800B0' | brightness_difference: '#FECEE9' }}
```

##### Code

```
{{ '#E800B0' | brightness_difference: '#FECEE9' }}
```

## Output

```html
134
```