Check your display

The images on this site will look best on a properly adjusted display. If you're using a tablet, phone or a laptop driving its own screen, things should look pretty good without any further adjustment - on a mobile device you may not be able to adjust any of the relevant settings even if you wanted to.

If you're using a separate display, you should probably check that it's set up correctly. While the ideal way to do this is to calibrate and profile it with a little gadget designed for the task, you can do a pretty good job by just using your eyes and the test images below.

First, get the basics right:

  • Make sure your browser is displaying 24-bit colour or better. The settings for this can be found in your operating system's control panel or system settings.
  • If you're using a monitor that has various preset colour modes, choose sRGB. This is particularly important with newer "wide gamut" LCD monitors - they will tend to show quite lurid colours if you don't do this. The only exception to this is if you know for certain that you have an ICC profile for your display installed on your computer and that your web browser supports colour management.
  • For the purposes of this test, make sure your browser is showing the images at their normal size, i.e. 100% zoom.

The next step is to adjust the colour balance, brightness, contrast and maybe black-offset of your monitor. On a desktop computer, these controls will be found on the monitor itself. On a laptop, there may be system-setting or control-panel controls for these.

Start by getting the colour balance and contrast right. Using the image below, adjust your monitor so that each square shows an even shade of colour. Stand back from the monitor so that you can't discern the fine alternating light and dark lines that make up the sides of each square.

Note that this technique might not be appropriate for tablets or hand-held devices. If you're viewing this page at the default zoom level and the comb-like pattern on the sides of the coloured squares below is very pronounced, you won't be able to use this technique. This is due to a pixel on the display not being exactly equal to a pixel in your web browser. The comb-like pattern should be very fine (as fine as your display can render) and not discernible from a few metres away.

calibration image

Next, check that highlight and shadow detail is visible. In the image below you should just be able to make out two animated alternating 4-by-5 checkerboards - one very dark and the other very light. You may need to dim the room lights and put your browser into full screen mode to see this.

calibration image

The procedure is a bit iterative - adjusting one control will affect the result in a way that means you may have to adjust some other control - but not particularly difficult. For more information, see this site on adjusting your monitor