Contrast

Nōtan (濃淡), meaning the interplay of dark and light, is Suisai’s dedicated WCAG 2.2 contrast checker.

Use it to evaluate whether two colors provide sufficient contrast for text or interface elements, preview how your typography looks, and find adjustments when a combination falls short.

Nōtan has three views:

• Pair: Examine two colors, preview text, check WCAG results, and use Reach to find improvements.
• Matrix: Compare every pairing among up to ten colors at once.
• Ladder: Hold one color constant and compare it against every other color in your collection.

Open Nōtan with ⇧⌘C or choose Window → Contrast.

Getting colors into Nōtan

Nōtan can hold up to 32 colors from palettes, harmonies, the Color Bench, or colors you’ve sampled directly.

Its collection is independent of the currently open palette. You can continue working elsewhere without changing the colors you’ve gathered for contrast checking.

There are several ways to add colors:

When sending individual colors, the first becomes the text color and the second becomes the background, or ground. Additional colors join the collection for Matrix and Ladder.

Dropping a color directly onto the Text or Ground picker assigns it to that role.

If you send a color already held in the opposite role, Nōtan swaps the two roles rather than adding a duplicate.

Pressing C over a swatch that’s already held removes it from Nōtan.

Swatches held in Nōtan carry a small indicator in their original palette or Bench window. You can also use the Contrast button on expanded swatches or in the Tiles view to add or remove them.

Sending an entire palette adds as many colors as the 32-color limit allows. Suisai reports any colors that could not be added.

You can also start from an empty Nōtan window. The Text and Ground pickers let you choose colors from your open palettes and the Bench.

Pair: checking two colors

Pair is the main contrast-checking view. It displays a foreground color as text against a background color and evaluates the combination using WCAG 2.2.

Preview your typography

The text preview appears at the top of the window.

Click the specimen to enter your own words, then choose the font family, size, and weight you intend to use.

The preview shows how the colors look together in the selected typography. This matters because a combination can meet a numerical contrast requirement yet still be difficult to read in practice.

Text size can be set between 9 and 96 px.

Choose the text and background colors

The two pickers are labeled Text and Ground, with a swap control between them.

Each picker offers colors already held in Nōtan, followed by colors available from your open palettes and the Bench.

If a color isn’t currently saved in a palette, an add-to-palette control lets you keep it.

Adjust lightness directly

Beneath each picker is a lightness slider.

Move it to make that color lighter or darker while preserving its hue. The track shows where the 3:1, 4.5:1, and 7:1 contrast thresholds occur relative to the other color.

The specimen and WCAG results update as you move the slider, allowing you to see both the numerical and visual effects.

Releasing the slider holds the adjusted color in Nōtan without discarding the original. A revert control lets you return to the previous color.

Understanding WCAG results

Nōtan calculates the contrast ratio between the original color values and compares it with the WCAG 2.2 requirements.

Large text generally means at least 24 px, or approximately 18.7 px at a sufficiently bold weight.

The contrast ratio belongs to the two colors, not the typography.

Changing the font, size, or weight doesn’t change the calculated ratio. It changes which WCAG threshold applies to the intended text.

Nōtan identifies the relevant requirement and explains the result in plain language. For example, a 5.91:1 combination used for normal text passes AA but not AAA.

Displayed ratios are truncated rather than rounded upward. A calculated ratio of 4.496:1 is displayed as 4.49:1, preventing a failing value from appearing to reach the 4.5:1 threshold.

For interface components, the relevant threshold is 3:1 regardless of text size.

Reach: finding a suitable adjustment

When a combination doesn’t meet your chosen contrast target, Reach helps you find a change that does.

Choose the target, such as AAA for normal text, and Reach searches for suitable adjustments to the Text or Ground color.

Reach varies lightness in OKLCH while preserving the original hue. It retains chroma where possible within sRGB, reducing it when necessary to keep the resulting color in gamut.

Each suggestion shows:

• The original and proposed colors
• The resulting HEX value
• The new contrast ratio
• The perceptual color difference (ΔE)
• Any necessary chroma reduction

Reach examines lighter and darker alternatives and identifies the smallest suitable change with a SMALLEST label.

It also checks colors already available in your open palettes and the Bench. If an existing color meets your target, Reach can suggest reusing it rather than creating another similar shade.

Where the target cannot be reached through lightness adjustment, Reach explains that limitation rather than suggesting a color that still fails.

Applying a suggestion

Choose Apply to use the suggested color in Pair. The previous color remains held in Nōtan for comparison.

The menu beside Apply offers additional options:

• Apply the adjustment and add the new color to a palette.
• Apply it and replace the original color in a palette that contains it.

Replacing a palette color is an editable action that can be undone in that palette.

You can also make adjustments manually with the lightness sliders beneath the Text and Ground pickers. These use the same lightness-adjustment approach as Reach.

Matrix: checking an entire collection

Matrix compares colors across a grid.

Each row represents a text color, and each column represents a background color. Every cell shows the text as it would appear on that background, together with its contrast ratio and WCAG grade.

The diagonal is excluded because it would compare each color against itself.

Click a cell to open that combination in Pair. The currently selected Pair combination is marked in the Matrix.

Hover over a cell to see a more detailed explanation of its result for the selected typography.

The ten-color display limit

Nōtan can hold 32 colors, but Matrix displays up to ten at a time.

Ten colors produce 90 directed comparisons, excluding the diagonal.

By default, the first ten colors in the held collection appear in the Matrix.

If more colors are held, the footer indicates how many are displayed. For example, 10 of 17 means ten are visible in Matrix while the remaining colors are still available in Nōtan.

Use Replace With from a row’s menu to substitute one of the other held colors into the grid. The replaced color remains available in the collection.

Sorting and rearranging

Choose Dark to Light to arrange the displayed colors by relative luminance, from darkest to lightest.

This makes contrast relationships easier to examine, with higher ratios generally appearing farther from the diagonal.

Use As Grounds to reverse how the grid presents text and background roles.

You can also drag rows by their names or columns by their headers to arrange colors manually.

The grading legend responds to the selected text size and weight, so the meaning of its symbols remains visible.

Ladder: comparing one color against the others

Ladder is a more focused way to examine contrast across a collection.

Instead of displaying every possible combination, it holds one color constant and compares it against each of the others.

Ladder becomes available as soon as Nōtan holds at least two colors.

Choose the comparison

Select the reference color from the picker above the list.

You can then examine the collection in either direction:

• Every color as text: Use each held color as foreground text against the selected background.
• Every color as ground: Use the selected text color against each background in the collection.

The control above the list describes which comparison is active.

Changing the fixed color also updates the corresponding Pair selection.

Read the results

Each row, or rung, shows the actual text and background colors, the color’s name and HEX value, its contrast ratio, and its WCAG grade.

Click a rung to open that combination in Pair.

Ladder displays seven rows at once, with additional colors available by scrolling. It can examine the full held collection of up to 32 colors.

Sort the Ladder

Choose Dark to Light to arrange the results by relative luminance. Once sorted, the control offers Light to Dark to reverse the order.

Ladder maintains its own sort preference independently of Matrix.

This is particularly useful when evaluating a series of text shades against a common background, or finding which backgrounds can support a particular text color.

An ink ladder is the clearest case. Every ink is read on the same ground, so the only comparison that matters is each one against that ground — a single column of the Matrix, and the whole of the Ladder.

Color-vision simulation

Nōtan can simulate four types of color-vision deficiency:

• Protanopia
• Deuteranopia
• Tritanopia
• Achromatopsia

Use the eye control in the window header or choose View → Vision. Press ⌃⌘V to cycle through the available simulations and return to Typical Vision.

The simulations affect the colors being evaluated: the specimen, swatches, Reach previews, Matrix cells, and other color comparisons.

Suisai’s own interface controls and explanatory text remain unchanged, so the tool itself stays readable.

Simulations change the visual presentation, not the underlying color values.

The WCAG contrast ratios therefore remain calculated from the original colors, and the interface identifies when a simulation is active.

Simulation settings apply to individual windows and aren’t retained after quitting Suisai.

The same functionality is available in palette windows and the Color Bench.

These simulations help you examine how colors may appear under different viewing conditions. They are approximations, not exact representations of any particular person’s vision.

Nothing is permanently altered by a simulation. Copied and exported colors retain their original values.

Held colors and saved palettes

A color being held in Nōtan isn’t necessarily saved in a palette.

The footer identifies colors that aren’t present in any currently open palette. Its menu lets you add colors to a palette or remove them from Nōtan.

A color may already exist in a palette in your Library even if that palette isn’t open.

The Already in the Library menu identifies palettes containing an exact match for the color’s HEX value. Select one to open that palette.

Colors created through Reach or manual lightness adjustments can also be added to a palette or used to replace an existing swatch.

Clearing and restoring Nōtan

Choose Clear in the footer, or press ⌘K while Nōtan is active, to empty the held collection.

Suisai asks for confirmation when clearing would discard colors that aren’t otherwise saved.

Closing the Nōtan window doesn’t remove its collection.

If Settings is configured to reopen Where I Left Off, Suisai restores the held colors, current Pair, typography settings, and specimen text after relaunch.

Keyboard controls

Nōtan provides a dedicated Contrast menu in the macOS menu bar, with commands for its views and common operations.

The Contrast menu also provides commands for changing font weight and family, typing your own specimen text, sorting, and choosing Reach targets.

Use Tab to navigate the controls. The specimen and text-size fields can be activated from the keyboard, and the lightness sliders respond to arrow keys using your Mac’s normal key-repeat behavior.

For the full reference, see Keyboard shortcuts.

Contrast checking from the Bench

The Bench displays the WCAG contrast ratio between neighboring columns, beneath its ΔH, ΔL, and ΔE measurements.

The ratio includes the same grading indicators used by Nōtan.

Click the ratio to open that pair in Nōtan, where you can inspect the typography, use Reach, or compare it with other colors.

What Nōtan doesn’t do

Nōtan evaluates color combinations. It doesn’t audit a finished website, inspect a design file for every accessibility issue, or certify that an entire interface complies with WCAG.

Its results apply to the selected colors and the relevant contrast thresholds. Text is evaluated against an opaque background.

The visual typography preview and color-vision simulations provide additional context, but neither replaces broader accessibility testing with actual users, interfaces, and assistive technologies.

Nōtan currently evaluates contrast using WCAG 2.2, not APCA.