Contrast playground · 20 × 20

Same motif. A whole new mood.

A small change of surface can change the whole feeling. Mix 20 assets with 20 surfaces, explore the details, and take your best pairing into the next idea.

dial · quiet

dial · quietsurface.canvas · #F6F7F3

Weakest listed sample
1.23 : 1
Strongest listed sample
1.62 : 1

Some sampled parts stay subtle

Sampled inks: #59D2FE / Authored alpha: 0.4–1

A range for the inks and alpha samples listed in the handoff. It does not cover every pixel or certify the whole asset for accessibility.

Download this asset

What these numbers tell you — and what they do not

We composite the listed ink samples over the surface at the supplied alpha values, then calculate their sRGB luminance contrast. You see both the minimum and maximum of that sample set. A strong detail never certifies the whole image. The color logo and CityChat contain inks beyond these samples; anti-aliased edges and the final layered composition are not measured here.

Gradient entries show one stop as a solid color. Check every stop and the final position. The overlay.glass sample is approximate and depends on what sits behind it. A larger motif can be easier to notice, but size does not increase its contrast ratio. Use alt="" for decoration, and check meaningful components and text alternatives separately.

Five small moves

Not quite there? Take the next small step.

Let the surface, the spacing and the file choice do the work, while the original artwork stays intact.

  1. L1

    Check the real output

    Inspect strong and soft details on the final surface and at the final size. Test every stop of a gradient.

  2. L2

    Try another surface

    Choose a supplied surface that fits the context and measure again. Avoid adding a plate or inventing a color to mask the issue.

  3. L3

    Choose another file

    Try full / quiet, ijji ink / mint, or CityChat light / dark. For logos, swap the rendition while keeping its original colors.

  4. L4

    Give it some room

    Adjust its size, move it out of the text column, or add clear space. Size does not increase the contrast ratio.

  5. L5

    Leave room for the story

    Remove the motif if needed. Text, buttons and real status components should still tell the complete story on their own.

Handoff reference guidance: a placement aid, not a new Design System rule. Check the exact file and its final context each time. · Read the original reference file

Official identity · 12 original files

The right logo for your surface

Explore all 12 supplied identity files. Try a light and deep surface before using one in navigation, co-branding or a document.

Landometer · Symbol color
Symbol · color · 1601 × 1601 pxcanvas · #F6F7F3

Start on a light surface. The blue base can blend into Brand Blue. Keep all authored colors.

Download this PNG
Browse all 12 identity downloads

All files retain the exact attachment bytes. Cream still uses legacy #EFEFD0, and gray is not clear on every background. Choose the rendition and surrounding surface for your actual output.